Buttons

A group of buttons: a wrapping row, or one fused control with data-attach.

Example

View Code 
<div class="buttons" role="group" aria-label="Text style" data-attach>
    <button class="button" type="button" data-emphasis="medium" aria-pressed="true">Bold</button>
    <button class="button" type="button" data-emphasis="medium" aria-pressed="false">Italic</button>
    <button class="button" type="button" data-emphasis="medium" aria-pressed="false">Underline</button>
</div>

When to use it

Two or more buttons that belong together: a form's submit and cancel, a set of view toggles, a toolbar row. Loose, they sit in a row at a small gap and wrap when they must. Attached, they become one control with shared borders, the shape of a segmented toggle.

How it works

Loose is a wrapping flex row at data-gap. data-attach removes the gap, squares the inner corners, and overlaps each border with the next so the seam is one line wide. A focused member is lifted above its neighbours so its focus ring is not covered.

<div class="buttons" role="group" aria-label="Form actions">
    <button class="button" type="submit">Save</button>
    <button class="button" type="button" data-emphasis="low">Cancel</button>
</div>

Accessibility

The group carries role="group" and a name, so a screen reader announces the set once. A segmented toggle puts aria-pressed on each button and the pressed look follows. Do not use an attached group as tabs; tabs have their own roles and keyboard behaviour and are a separate component.

Attributes

Attribute Type Values Default Description
data-attach boolean Fuse the buttons into one segmented control that shares borders.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl sm Space between buttons when not attached.

Children

  • > .button: at least 2. The buttons.

Tokens

Token Description
--yeti-space-sm The default gap.
--yeti-border-width The width the attached members overlap by.
Internal tokens (may change between minor versions) - `--_yeti-gap`

Accessibility

  • Role: group
  • Required attributes: role, aria-label or aria-labelledby
  • role="group" with a name, so the set is announced as one thing. A segmented toggle sets aria-pressed on each member; a set of tabs is the tabs component, not this.

Browser support

  • Used without guards: flexbox gap, logical border radii
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.