Buttons
Actions, in every weight
Variants
From the main action to the quietest one.
Code
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-tinted">Tinted</button>
<button type="button" class="btn btn-gray">Gray</button>
<button type="button" class="btn btn-outline">Outline</button>
<button type="button" class="btn btn-link">Plain</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-glass">Glass</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger-soft">Danger soft</button>
<button type="button" class="btn btn-warning">Warning</button>Sizes
Extra small to large.
Code
<button type="button" class="btn btn-primary btn-xs">Extra small</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>With icons
Before or after the label.
Code
<button type="button" class="btn btn-primary"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Download</button>
<button type="button" class="btn btn-gray">Next<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-outline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Share</button>Icon only
Always with a name for screen readers.
Code
<button type="button" class="btn btn-gray btn-icon" aria-label="Add" data-bs-toggle="tooltip" data-bs-title="Add"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-gray btn-icon" aria-label="Edit" data-bs-toggle="tooltip" data-bs-title="Edit"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-gray btn-icon" aria-label="Delete" data-bs-toggle="tooltip" data-bs-title="Delete"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-gray btn-icon" aria-label="More" data-bs-toggle="tooltip" data-bs-title="More"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>States
Disabled and busy.
Code
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-primary is-loading">Saving</button>Full width
Code
<button type="button" class="btn btn-primary w-100">Continue</button>
<button type="button" class="btn btn-gray w-100">Cancel</button>