Buttons

Variants

Soft

Surface

Outline

Ghost

Link

Primary

Secondary

Info

Danger

Warning

Success

Reverse

White

Black

    <button type="button" class="ui-btn ui-btn--primary ui-btn--md">Button text</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md ui-btn--soft">Button text</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md ui-btn--surface">Button text</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md ui-btn--outline">Button text</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md ui-btn--ghost">Button text</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md ui-btn--link">Button text</button>

Sizes

    <button type="button" class="ui-btn ui-btn--primary ui-btn--xs">Button - xs</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--sm">Button - sm</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--md">Button - md</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--lg">Button - lg</button>
    <button type="button" class="ui-btn ui-btn--primary ui-btn--lg">Button - xl</button>

Icon button

You can assign the .ui-btn--icon class to a button, in which case it will have 1x1 proportions.

<button class="ui-btn ui-btn--primary ui-btn--icon ui-btn--sm">
  <span class="ui-icon ui-icon--clipboard"></span>
</button>

Close button

By default, the icon color is inherited from the parent text color with 75% opacity.

    <button type="button" class="ui-btn-close" aria-label="Close"></button>