role presentation
Avatar draft v0.1.0
Represents a person or an entity with a picture, or their initials when there is none.
An avatar shows who or what something belongs to: the author of a comment, the members of a project, a workspace. It displays a picture when there is one and the initials of the name otherwise, in a circle or a rounded square. Assistive technology reads it as an image named by the person, unless the name is written right next to it, in which case the avatar is decoration.
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 shape
| Shape | default |
|---|---|
circle |
|
square |
|