Skip to content

role button

Button draft v0.22.1

Triggers an action or event when activated.

A button lets people perform an action with a single activation: submit a form, open a dialog, confirm a choice. Its emphasis communicates how important the action is on the screen; its intent communicates what kind of action it is. Buttons never navigate; use a link for navigation.

States matrix

Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.

By emphasis × intent

intent = neutral

Emphasis defaulthoverpointeractivefocus-visiblekeyboarddisabled
accent
subtle
ghost

intent = brand

Emphasis defaulthoverpointeractivefocus-visiblekeyboarddisabled
accent
subtle
ghost

intent = error

Emphasis defaulthoverpointeractivefocus-visiblekeyboarddisabled
accent
subtle
ghost

By size

Size defaulthoverpointeractivefocus-visiblekeyboarddisabled
xsmall
small
medium
large