Buttons

Regular buttons with support for a mix of text / icon content.

  • Default
  • Inverse
<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>
<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
  • Inverse
<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>
<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.

  • Default
  • Inverse
<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>
<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.

  • Default
  • Inverse
<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>
<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.

  • Default
  • Inverse
<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>
<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

<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.

<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
  • Inverse
<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>
<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>