Button group
Related text buttons standing on one shared ink rule.
States
-
At rest
nothing set
Labels in ink on one ink rule.
-
One item hot
hover or :focus-visible
Its segment of the rule develops in --state; the others stay ink.
-
An item disabled
disabled
Muted; the rule under it stays ink.
Anatomy
| Items | text buttons in the label voice, 40px tall, a module apart |
|---|---|
| Rule | one 1px ink rule under the whole group; the items stand on it |
| Hover | a flare under the pointer (280ms) and the item's own segment of the rule develops in --state in 140ms |
| Use | a short set of peer actions; for a choice between options, the toggle group |
Timings are read from the engine at build time (rule.ts).
Decisions
-
One line, several ways in
The items share the group’s rule rather than each carrying its own hairline, so the group reads as one line with several entry points.
-
Not a choice
Nothing in a group is selected. A choice between peers is the toggle group, whose selected option is an ink fill.