Web Components - Toolbar

As defined by the W3C:

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users. Grouping controls into toolbars can also be an effective way of reducing the number of tab stops in the keyboard interface.

Set-up

import { provideDesignSystem, alphaToolbar } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaToolbar());

Usage

Live Editor

<alpha-toolbar>
  <alpha-button>Button</alpha-button>
  <alpha-select>
    <alpha-option>Option 1</alpha-option>
    <alpha-option>Second option</alpha-option>
    <alpha-option>Option 3</alpha-option>
  </alpha-select>
  <alpha-radio-group>
    <alpha-radio checked="">One</alpha-radio>
    <alpha-radio>Two</alpha-radio>
    <alpha-radio>Three</alpha-radio>
  </alpha-radio-group>
</alpha-toolbar>

Result

Loading...

Use cases

• Used anywhere someone may want to group related interactive controls visually and structurally.

Additional resources

• W3C Component Aria Practices