Actions
Buttons, menu buttons and segmented controls, on native buttons and radio inputs.
Button
The status variants take their colour from the theme’s status roles:
Sizes scale everything together, from xs to xl, and --gw-button-scale sets any size in between or beyond:
Export
| Attribute | Values |
|---|---|
variant |
primary, secondary (default), accent, plain, info, success, warning or danger |
size |
xs, small, medium (default), large or xl; or set --gw-button-scale |
type |
button (default), submit or reset |
href |
Renders a link that looks the same |
label |
An accessible name, for a button with only an icon |
disabled |
Disables it |
It renders a native <button>, or an <a> with href. Put an icon in the icon slot. Style the inner element with ::part(button).
Preview: colour and appearance
This is a preview of Home Assistant’s Design Kit model, which may replace the variants above. The variant picks the colour (brand, neutral, success, warning or danger) and appearance how it’s applied, from most to least important: accent, filled, outlined or plain. Every button is a pill.
In practice a screen pairs them by importance, such as a danger accent button beside a neutral plain one:
Menu button
The menu opens on the Popover API, in the top layer, and closes on Esc or a click outside. Arrow keys, Home and End move between items and actions. Choosing one fires select with its value, closes the menu and puts focus back on the button.
Set items to [{ "value", "label", "description", "icon", "disabled" }], as JSON or as a property. They render inside the component, so a page’s own button styles can’t reach them.
Contextual actions, such as “Add”, go in actions, in the same shape. They stay below the items as the list scrolls, rather than sitting at the end of it, so they’re found straight away, and there can be several. With no items, the menu says so (empty) above them. This follows Home Assistant’s contextual actions in popovers.
Segmented control
| Attribute | Values |
|---|---|
label |
Names the group for assistive technology |
value |
The picked option |
options |
JSON: [{ "value", "label" }], or set the property |
name |
The form field name; one is made up if left out |
It’s a <fieldset> of native radio buttons, so arrow keys move the choice and a form submits it. It fires change.
Options can carry an icon as path data, as Home Assistant’s toggles do. labels="auto" shows the text on wide screens and only the icons on narrow ones, hide always shows icons only, and either way the text stays as the tooltip and the accessible name: