Buttons
Regular buttons with support for a mix of text / icon content.
Default
Toolbar
Info
Error
Warning
Success
<button class="lui-button">Default</button>
<button class="lui-button lui-button--gradient">Toolbar</button>
<button class="lui-button lui-button--info">Info</button>
<button class="lui-button lui-button--danger">Error</button>
<button class="lui-button lui-button--warning">Warning</button>
<button class="lui-button lui-button--success">Success</button>
Inverse
Toolbar
Info
Error
Warning
Success
<button class="lui-button lui-button--inverse">Inverse</button>
<button class="lui-button lui-button--gradient-inverse">Toolbar</button>
<button class="lui-button lui-button--info">Info</button>
<button class="lui-button lui-button--danger">Error</button>
<button class="lui-button lui-button--warning">Warning</button>
<button class="lui-button lui-button--success">Success</button>
To create rounded buttons, add a variant class "lui-button--rounded".
Default
Info
Error
Warning
Success
<button class="lui-button lui-button--rounded">Default</button>
<button class="lui-button lui-button--rounded lui-button--info">Info</button>
<button class="lui-button lui-button--rounded lui-button--danger">Error</button>
<button class="lui-button lui-button--rounded lui-button--warning">Warning</button>
<button class="lui-button lui-button--rounded lui-button--success">Success</button>
Inverse
Info
Error
Warning
Success
<button class="lui-button lui-button--rounded lui-button--inverse">Inverse</button>
<button class="lui-button lui-button--rounded lui-button--info">Info</button>
<button class="lui-button lui-button--rounded lui-button--danger">Error</button>
<button class="lui-button lui-button--rounded lui-button--warning">Warning</button>
<button class="lui-button lui-button--rounded lui-button--success">Success</button>
Buttons support adding the states active and disabled, which is done through the "lui-active" and "lui-disabled" classes.
It is recommended to use the "lui-disabled" class instead of the disabled attribute because the disabled attribute prevents
the element from receiving mouse events (needed for example when drag & dropping) in Firefox.
Active
Active
Active
Disabled
Disabled
Disabled
<button class="lui-button lui-active">Active</button>
<button class="lui-button lui-button--gradient lui-active">Active</button>
<button class="lui-button lui-button--success lui-active">Active</button>
<button class="lui-button lui-disabled">Disabled</button>
<button class="lui-button lui-button--gradient lui-disabled">Disabled</button>
<button class="lui-button lui-button--success lui-disabled">Disabled</button>
Active
Active
Active
Disabled
Disabled
Disabled
<button class="lui-button lui-button--inverse lui-active">Active</button>
<button class="lui-button lui-button--gradient-inverse lui-active">Active</button>
<button class="lui-button lui-button--success lui-active">Active</button>
<button class="lui-button lui-button--inverse lui-disabled">Disabled</button>
<button class="lui-button lui-button--gradient-inverse lui-disabled">Disabled</button>
<button class="lui-button lui-button--success lui-disabled">Disabled</button>
Buttons and icons
Buttons can contain both text and icons. When combined, these requirements apply:
The text must be enclosed within an element having the class .lui-button__text.
The elements representing icons must have the class .lui-button__icon.
The element representing a caret must have the class .lui-button__caret.
Buttons support right-to-left, given that the dir="rtl" attribute is present on the button itself or any of its ancestors.
Don't place any spaces or line breaks between the elements in the button, since that will cause unwanted spacing to be added.
Add item
Add item
Add item
Add item
<button class="lui-button">
<span class="lui-button__icon lui-icon lui-icon--plus"></span>
</button>
<button class="lui-button">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span><span class="lui-button__caret lui-caret"></span>
</button>
<button class="lui-button lui-button--rounded">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--rounded">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span><span class="lui-button__caret lui-caret"></span>
</button>
Add item
Add item
Add item
Add item
<button class="lui-button lui-button--inverse">
<span class="lui-button__icon lui-icon lui-icon--plus"></span>
</button>
<button class="lui-button lui-button--inverse">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--inverse">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span><span class="lui-button__caret lui-caret"></span>
</button>
<button class="lui-button lui-button--rounded lui-button--inverse">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--rounded lui-button--inverse">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span><span class="lui-button__caret lui-caret"></span>
</button>
Block style button
Block style buttons takes up as much space it can, adding ellipsis to text that does not fit on one line.
Add item
Add item
Add item
<button class="lui-button lui-button--block" style="margin-bottom: 5px;">
<span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--block" style="margin-bottom: 5px;">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--block lui-button--rounded" style="margin-bottom: 5px;">
<span class="lui-button__text">Add item</span><span class="lui-button__icon lui-icon lui-icon--plus"></span>
</button>
Add item
Add item
Add item
<button class="lui-button lui-button--inverse lui-button--block" style="margin-bottom: 5px;">
<span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--inverse lui-button--block" style="margin-bottom: 5px;">
<span class="lui-button__icon lui-icon lui-icon--plus"></span><span class="lui-button__text">Add item</span>
</button>
<button class="lui-button lui-button--inverse lui-button--block lui-button--rounded" style="margin-bottom: 5px;">
<span class="lui-button__text">Add item</span><span class="lui-button__icon lui-icon lui-icon--plus"></span>
</button>
Button sizing
You can control the size of buttons by adding a class. The following sizing options are available:
default - 28px
large - 38px
extra large - 54px
Default
Default
Default
<button class="lui-button">Default</button>
<button class="lui-button lui-button--large">Default</button>
<button class="lui-button lui-button--x-large">Default</button>
Overlay buttons
The overlay button is special type of button that can be used on top of dynamic background images.
Overlay button
Overlay button
Overlay button
Text
Overlay button
<button class="lui-overlay-button lui-overlay-button--small">Overlay button</button>
<button class="lui-overlay-button lui-overlay-button--small">
<span class="lui-overlay-button__icon lui-icon lui-icon--small lui-icon--tick lui-text-success"></span>
</button>
<button class="lui-overlay-button lui-overlay-button--small lui-disabled">Overlay button</button>
<button class="lui-overlay-button">Overlay button</button>
<button class="lui-overlay-button">
<span class="lui-overlay-button__icon lui-icon lui-icon--tick lui-text-success"></span>
</button>
<button class="lui-overlay-button">
<span class="lui-overlay-button__icon lui-icon lui-icon--plus"></span>
<span class="lui-overlay-button__text">Text</span>
<span class="lui-overlay-button__caret lui-caret"></span>
</button>
<button class="lui-overlay-button lui-disabled">Overlay button</button>
Fade buttons
Fade buttons are typically used inside other components like lists and popovers
to create functional layouts.
Default
Text n
<button class="lui-fade-button">Default</button>
<button class="lui-fade-button">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-active">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-disabled">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--warning">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--success">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--info">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--danger">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--large">
<span class="lui-fade-button__icon lui-icon lui-icon--large lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--large lui-active">
<span class="lui-fade-button__icon lui-icon lui-icon--large lui-icon--home"></span>
</button>
<button class="lui-fade-button">
<span class="lui-fade-button__text">Text n </span>
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
Inverse
Text n
<button class="lui-fade-button lui-fade-button--inverse">Inverse</button>
<button class="lui-fade-button lui-fade-button--inverse">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--inverse lui-active">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--inverse lui-disabled">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--warning">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--success">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--info">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--danger">
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--inverse lui-fade-button--large">
<span class="lui-fade-button__icon lui-icon lui-icon--large lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--inverse lui-fade-button--large lui-active">
<span class="lui-fade-button__icon lui-icon lui-icon--large lui-icon--home"></span>
</button>
<button class="lui-fade-button lui-fade-button--inverse">
<span class="lui-fade-button__text">Text n </span>
<span class="lui-fade-button__icon lui-icon lui-icon--home"></span>
</button>
