Button

.button makes elements look like a button.

Applicable Elements

• button
• a

Basic Usage

<button class="button">Plain Button</button>
<a class="button" href="https://github.com" target="_blank">Open github.com</a>

Variants

Buttons have variants based on their roles.

<button class="button">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button tertiary">Tertiary</button>
<button class="button shy">Shy</button>

Combination

.icon suits well with .button.

<button class="button">
  <svg class="icon"><use href="/home.svg#root" /></svg>
  Home
</button>

<button class="button secondary">
  Edit
  <svg class="icon"><use href="/edit.svg#root" /></svg>
</button>

<button class="button tertiary">
  <svg class="icon"><use href="/copy.svg#root" /></svg>
</button>

States

<button class="button" disabled>
  <svg class="icon"><use href="/delete.svg#root" /></svg>
  Delete
</button>

<button class="button secondary" disabled>
  <progress class="progress circular icon" style="color: gray;" />
  Sending...
</button>

Size and Color

There are no pre-defined variants for size and color.
Write your own CSS and it just works!

<button class="button my-small">Small</button>
<button class="button my-large">Large</button>
<button class="button my-destructive">Red</button>

<style>
  .button.my-small {
    height: 32px;
    padding: 0 12px;
  }
  .button.my-large {
    height: 48px;
    border-radius: 12px;
    padding: 0 24px;
  }
  .button.my-destructive {
    background-color: rgb(225 83 83);
  }
</style>

Q&A

I don’t want ripple effects

You can set --sui-button-ripple-effect-content to none in your theme.