Examples
Basic usage
<button class="button" type="button">Save changes</button>
Color and emphasis
<div class="cluster is-tight">
<button class="button" type="button">Primary</button>
<button class="button is-neutral" type="button">Neutral</button>
<button class="button is-accent" type="button">Accent</button>
<button class="button is-danger" type="button">Danger</button>
<button class="button is-ghost" type="button">Ghost</button>
<button class="button is-bare" type="button">Bare</button>
</div>
<div class="cluster is-tight">
<button class="button is-outlined" type="button">Outlined</button>
<button class="button is-neutral is-outlined" type="button">Neutral (outlined)</button>
<button class="button is-accent is-outlined" type="button">Accent (outlined)</button>
<button class="button is-danger is-outlined" type="button">Danger (outlined)</button>
</div>
Size
<div class="cluster is-tight">
<button class="button is-sm" type="button">Small</button>
<button class="button" type="button">Default</button>
<button class="button is-lg" type="button">Large</button>
</div>
Shape
<div class="stack is-snug">
<div class="cluster is-tight">
<button class="button" type="button">Default shape</button>
<button class="button is-outlined is-icon" type="button" aria-label="Settings">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
</button>
</div>
<button class="button is-block" type="button">Full-width action</button>
</div>
States
<div class="cluster is-tight">
<button class="button" type="button" disabled>Disabled</button>
<button class="button is-outlined" type="button" disabled>Disabled outlined</button>
<button class="button" type="button" aria-busy="true">Saving</button>
<button class="button is-outlined" type="button" aria-busy="true">Saving</button>
<button class="button is-danger" type="button" aria-busy="true">Deleting</button>
<button class="button is-danger is-outlined" type="button" aria-busy="true">
Deleting
</button>
</div>
Buttons with icons
<div class="cluster is-tight">
<button class="button is-outlined" type="button">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
Download
</button>
<button class="button" type="button">
Continue
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
</div>
Button group
<div class="stack is-snug">
<div class="cluster is-tight">
<div class="button-group">
<button class="button" type="button">Bold</button>
<button class="button" type="button" aria-pressed="true">Italic</button>
<button class="button" type="button">Underline</button>
</div>
<div class="button-group">
<button class="button is-neutral" type="button">Bold</button>
<button class="button is-neutral" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-neutral" type="button">Underline</button>
</div>
</div>
<div class="cluster is-tight">
<div class="button-group">
<button class="button is-accent" type="button">Bold</button>
<button class="button is-accent" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-accent" type="button">Underline</button>
</div>
<div class="button-group">
<button class="button is-danger" type="button">Bold</button>
<button class="button is-danger" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-danger" type="button">Underline</button>
</div>
</div>
<div class="cluster is-tight">
<div class="button-group">
<button class="button is-outlined" type="button">Bold</button>
<button class="button is-outlined" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-outlined" type="button">Underline</button>
</div>
<div class="button-group">
<button class="button is-neutral is-outlined" type="button">Bold</button>
<button class="button is-neutral is-outlined" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-neutral is-outlined" type="button">Underline</button>
</div>
</div>
<div class="cluster is-tight">
<div class="button-group">
<button class="button is-accent is-outlined" type="button">Bold</button>
<button class="button is-accent is-outlined" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-accent is-outlined" type="button">Underline</button>
</div>
<div class="button-group">
<button class="button is-danger is-outlined" type="button">Bold</button>
<button class="button is-danger is-outlined" type="button" aria-pressed="true">
Italic
</button>
<button class="button is-danger is-outlined" type="button">Underline</button>
</div>
</div>
<div class="button-group">
<button class="button" type="button">Foo</button>
<button class="button" type="button">Bar</button>
<button class="button" type="button">Baz</button>
<button class="button" type="button">Qux</button>
</div>
<div class="button-group">
<button class="button is-sm" type="button">Foo</button>
<button class="button is-sm" type="button">Bar</button>
<button class="button is-sm" type="button">Baz</button>
<button class="button is-sm" type="button">Qux</button>
</div>
<div class="button-group">
<button class="button" type="button">Foo</button>
<button class="button" type="button" aria-pressed="true">Bar</button>
<button class="button" type="button">Baz</button>
<button class="button" type="button">Qux</button>
</div>
<div class="button-group">
<button class="button is-outlined" type="button">Foo</button>
<button class="button is-outlined" type="button" aria-pressed="true">Bar</button>
<button class="button is-outlined" type="button">Baz</button>
<button class="button is-outlined" type="button">Qux</button>
</div>
</div>
Button cluster
<div class="cluster is-tight">
<button class="button is-outlined" type="button">Cancel</button>
<button class="button" type="button">Save</button>
</div>
Source comments
Button
Color and style stack independently:
.button solid primary (default)
.button.is-accent solid accent
.button.is-danger solid danger
.button.is-neutral solid neutral fill (chrome / quiet actions)
.button.is-outlined outlined primary
.button.is-danger.is-outlined outlined danger
.button.is-neutral.is-outlined outlined neutral (typical for chrome)
Works as <button> or <a class="button">. Anchor buttons can't carry
:disabled; set aria-disabled="true" instead -- the disabled recipe
below matches both (P5).
Reference
Source: src/css/button.css
Applies to
.button
Classes
| Class | Kind | Description |
|---|---|---|
.[aria-busy="true"] | modifier | Setting aria-busy=true will show the spinner indicator, and alter the cursor type. |
.is-accent | variant | Accent color variant |
.is-danger | variant | Danger color variant |
.is-neutral | variant | Neutral fill for chrome and quiet actions |
.is-outlined | variant | Transparent fill with tinted text and border |
.is-ghost | variant | Transparent background with no border |
.is-bare | variant | No visual chrome, just a clickable wrapper |
.is-sm | variant | Smaller size with tighter padding |
.is-lg | variant | Larger size with more padding |
.is-icon | variant | Square padding for icon-only buttons |
.is-block | variant | Full-width button |
Slots
| Slot | Description |
|---|---|
svg | Icons act as their own slot inside a button |
Tokens
| Token | Default | Description |
|---|---|---|
--button-bg | var(--color-primary) | Background color for the button |
--button-color | var(--color-on-primary) | Text and icon color for the button |
--button-color-hover | var(--button-color) | Text color on hover, defaults to --button-color |
--button-border-color | transparent | Border color for the button |
--button-border-width | var(--border-width-default) | Border width for the button |
--button-border-style | solid | Border style for the button |
--button-padding-block | var(--ui-pad-block-tight) | Block-axis padding inside the button |
--button-padding-inline | var(--ui-pad-inline-snug) | Inline-axis padding inside the button |
--button-radius | var(--radius-md) | Border radius for the button |
--button-font-size | var(--ui-font-size-sm) | Font size for button text |
--button-font-weight | var(--font-weight-bold) | Font weight for button text |
--button-box-shadow | none | Box shadow for button |
--button-icon-size | var(--default-icon-size) | Size of SVG icons inside the button |
Related: Button Group
Segmented group of related buttons
Source: src/css/button.css
Applies to
.button-group