Skip to content

role button

Icon button draft v0.5.1

Triggers an action with an icon alone; its label is given to assistive technology.

An icon button performs an action, like a button, but shows only an icon: it saves room in toolbars, table rows and headers where the action is familiar enough to be recognized from its symbol. It has no visible text, so it always carries a label that assistive technology announces as its name. Like every button, it never navigates.

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