role presentation
Icon draft v0.1.0
A glyph of the system's icon set, decorative or named.
An icon draws one glyph of the icon set (Material Symbols, the Iconography foundation) at a size and in a color of the system. Next to text it is decoration and says nothing to assistive technology; alone, it must be named by what it means, and is then exposed as an image. Icons inside the other components (buttons, alerts, selects) are those components' parts, styled by their tokens; this component is for icons placed by a product in its own content.
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 size
| Size | default |
|---|---|
small |
|
medium |
|
large |
|
By color
| Color | default |
|---|---|
current |
|
neutral |
|
brand |
|
success |
|
warning |
|
error |
|
info |
|