Buttons
Actions, in every weight
Variants
From the main action to the quietest one.
Code
<button type="button" class="btn btn-primary" data-toast='{"title":"Primary","text":"The main action in a view: Save, Create, Pay. One to a view.","tone":"info"}'>Primary</button>
<button type="button" class="btn btn-tinted" data-toast='{"title":"Tinted","text":"A second action that still needs weight, beside a primary one.","tone":"info"}'>Tinted</button>
<button type="button" class="btn btn-gray" data-toast='{"title":"Gray","text":"Everyday actions: Export, Filter, Edit.","tone":"info"}'>Gray</button>
<button type="button" class="btn btn-outline" data-toast='{"title":"Outline","text":"An action on a busy surface, where a fill would be too loud.","tone":"info"}'>Outline</button>
<button type="button" class="btn btn-plain" data-toast='{"title":"Plain","text":"An action inside a line of text, with no frame.","tone":"info"}'>Plain</button>
<button type="button" class="btn btn-ghost" data-toast='{"title":"Ghost","text":"Toolbar and icon actions; the frame shows on hover.","tone":"info"}'>Ghost</button>
<button type="button" class="btn btn-glass" data-toast='{"title":"Glass","text":"An action over a picture, a video or a map.","tone":"info"}'>Glass</button>
<button type="button" class="btn btn-success" data-toast='{"title":"Success","text":"An action that confirms: Approve, Mark as paid.","tone":"info"}'>Success</button>
<button type="button" class="btn btn-danger" data-toast='{"title":"Danger","text":"An action that deletes; ask first, in a dialog.","tone":"info"}'>Danger</button>
<button type="button" class="btn btn-danger-soft" data-toast='{"title":"Danger soft","text":"A delete that is not the main action in the view.","tone":"info"}'>Danger soft</button>
<button type="button" class="btn btn-warning" data-toast='{"title":"Warning","text":"An action that needs care: Pause, Hold, Retry.","tone":"info"}'>Warning</button>Sizes
Extra small to large.
Code
<button type="button" class="btn btn-primary btn-xs" data-toast='{"title":"Extra small","text":"28 px high, for tables and tight rows.","tone":"info"}'>Extra small</button>
<button type="button" class="btn btn-primary btn-sm" data-toast='{"title":"Small","text":"32 px high, for cards and toolbars.","tone":"info"}'>Small</button>
<button type="button" class="btn btn-primary" data-toast='{"title":"Default","text":"40 px high, for forms and page heads.","tone":"info"}'>Default</button>
<button type="button" class="btn btn-primary btn-lg" data-toast='{"title":"Large","text":"48 px high, for touch and the last step of a flow.","tone":"info"}'>Large</button>With icons
Before or after the label.
Code
<button type="button" class="btn btn-primary" data-toast='{"title":"Download started","text":"The file will be in your downloads in a moment.","tone":"success"}'><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Download</button>
<button type="button" class="btn btn-gray" data-toast='{"title":"Next lesson","text":"Lesson 5 · Colour and contrast starts now.","tone":"info"}'>Next<svg class="icon icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-outline" data-copy="page"><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-tooltip="Add" data-toast='{"title":"Add","text":"An icon button: its name is in the tooltip and read out by screen readers.","tone":"info"}'><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-tooltip="Edit" data-toast='{"title":"Edit","text":"An icon button: its name is in the tooltip and read out by screen readers.","tone":"info"}'><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-tooltip="Delete" data-toast='{"title":"Delete","text":"An icon button: its name is in the tooltip and read out by screen readers.","tone":"info"}'><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-tooltip="More" data-toast='{"title":"More","text":"An icon button: its name is in the tooltip and read out by screen readers.","tone":"info"}'><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" aria-busy="true" aria-disabled="true">Saving</button>Full width
Code
<button type="button" class="btn btn-primary btn-block" data-toast='{"title":"Full width","text":"Fills its container: the last step of a form on a phone.","tone":"info"}'>Continue</button>
<button type="button" class="btn btn-gray btn-block" data-toast='{"title":"Full width","text":"The second action sits under the first.","tone":"info"}'>Cancel</button>