Button

An action with a face: a hue, an emphasis, and a size, with every state taken from the element itself.

Example

View Code 
<div class="buttons" role="group" aria-label="Emphasis">
    <button class="button" type="button">Save</button>
    <button class="button" type="button" data-emphasis="medium">Preview</button>
    <button class="button" type="button" data-emphasis="low">Cancel</button>
</div>

When to use it

Anything the visitor does: submit, save, open, dismiss. Put the class on a button for an action and on an a for a link that should look like a button. One high-emphasis button per view is a good rule; the rest are medium or low, so the eye finds the main action.

How it works

Three attributes and no classes. data-variant picks a hue from the palette and the button reads that hue's ladder for its fill, its hover step, and its outline text. data-emphasis picks how much of the ladder shows: high fills, medium outlines, low is text that tints on hover. data-size scales the text and the padding together so the shape holds. Hover, active, focus, disabled, pressed, and busy come from the element's own state, so nothing needs a script to look right.

<a class="button" href="/docs" data-variant="secondary" data-emphasis="medium" data-size="lg">
    <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 12h14m-6-6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    Read the docs
</a>

Accessibility

A button is a button and an a is a link; the class changes the look, not the role, so use the element that matches what happens. An icon-only button needs an aria-label. A toggle carries aria-pressed, and the pressed look follows it. A button that is waiting on a request carries aria-busy="true" and aria-disabled="true" together: it dims, shows a progress cursor, and your handler ignores presses until the request returns. The focus ring is the page's ring and is never removed. Text over every fill meets AA in both colour schemes; the test suite checks each variant.

Attributes

Attribute Type Values Default Description
data-variant enum primary, secondary, success, warning, alert, neutral primary Which hue's ladder the button uses.
data-emphasis enum high, medium, low high How loud: high is a solid fill, medium an outline, low text alone.
data-size enum sm, md, lg md Scales the text and the padding together.
data-open string The id of a dialog this button opens, when dialog.js is loaded.

Children

  • > svg: 0 to 1. An optional icon, sized to the text.

Tokens

Token Description
--yeti-button-radius Corner radius.
--yeti-button-weight Text weight.
--yeti-button-padding Inline padding as a multiple of the size's space step.
--yeti-control-size Minimum height.
--yeti-border-width Border width.
--yeti-space-xs Gap between the icon and the label.
--yeti-leading-tight Line height.
--yeti-duration-fast How long a hover or press takes to settle.
--yeti-ease The curve of that transition.
--yeti-color-primary The default variant's colour, when data-variant is absent.
--yeti-color-primary-subtle The default variant's tint.
--yeti-color-primary-soft The default variant's soft stop.
--yeti-color-primary-strong The default variant's strong stop.
--yeti-color-primary-text The default variant's text colour.
--yeti-on-primary Text on the default variant's colour.
--yeti-text-md Text size when data-size is absent.
--yeti-space-sm The space step when data-size is absent.
--yeti-opacity-muted Opacity when disabled or busy.
Internal tokens (may change between minor versions) - `--_yeti-variant` - `--_yeti-variant-subtle` - `--_yeti-variant-strong` - `--_yeti-variant-text` - `--_yeti-on-variant` - `--_yeti-size-text` - `--_yeti-size-space` - `--_yeti-variant-soft`

Accessibility

  • Put the class on a button, an a, or a submit input, nothing else. Use button for actions and a for navigation. An icon-only button needs an aria-label. A toggle sets aria-pressed; a button that is waiting sets aria-busy="true" together with aria-disabled="true", and your handler ignores presses while it waits.
Key Action
Enter / Space Activates a button element; Enter follows a link.

Browser support

  • Used without guards: inline flexbox, logical properties
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.