Button

A button to perform actions with different styles and colors.

Base

<button class="btn">Button</button>

Colors

Set the button color using the is-{color} class.

info

To see the available colors, check the Colors section.

<div class="is-flex is-gap-3">
  <button class="btn is-primary">Primary</button>
  <button class="btn is-info">Info</button>
  <button class="btn is-success">Success</button>
  <button class="btn is-warning">Warning</button>
</div>

Tonal

Adds a tonal background to the button using the is-tonal class.

tip

You can combine it with colors, for example: is-tonal is-primary, is-tonal is-warning, etc.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-tonal">Tonal primary</button>
  <button class="btn is-info is-tonal">Tonal info</button>
  <button class="btn is-success is-tonal">Tonal success</button>
  <button class="btn is-warning is-tonal">Tonal warning</button>
</div>

Outlined

You can set the button with borders and a white background using the is-outlined class.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-outlined">Outlined primary</button>
  <button class="btn is-info is-outlined">Outlined info</button>
  <button class="btn is-success is-outlined">Outlined success</button>
  <button class="btn is-warning is-outlined">Outlined warning</button>
</div>

Rounded

You can set the button with rounded borders using the is-rounded class.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-rounded">Rounded primary</button>
  <button class="btn is-info is-outlined is-rounded">
    Rounded outlined info
  </button>
  <button class="btn is-success is-tonal is-rounded">
    Rounded tonal success
  </button>
</div>

Icons

You can add icons to the button using the <iconify-icon> component.

tip

For more information on how to use icons, check the Icons section.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-error">
    <iconify-icon class="icon" icon="mdi:trash"></iconify-icon>
    <span>Delete</span>
  </button>

  <button class="btn is-info is-outlined">
    <span>Info</span>
    <iconify-icon class="icon" icon="mdi:info"></iconify-icon>
  </button>

  <button class="btn is-warning is-tonal">
    <span>Warning</span>
    <iconify-icon class="icon" icon="mdi:warning"></iconify-icon>
  </button>

  <button class="btn is-primary is-rounded">
    <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
    <span>Home</span>
  </button>
</div>