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.
Tokens
From packages/tokens/src/components/avatar.tokens.json. Path grammar: avatar.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (8)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
avatar.container.size.small
|
dimension |
{size.4}
|
24px
|
--avatar-container-size-small
|
avatar.container.size.medium
|
dimension |
{size.5}
|
32px
|
--avatar-container-size-medium
|
avatar.container.size.large
|
dimension |
{size.6}
|
40px
|
--avatar-container-size-large
|
avatar.container.border-radius.circle
|
dimension |
{corner-radius.full}
|
9999px
|
--avatar-container-border-radius-circle
|
avatar.container.border-radius.square
|
dimension |
{corner-radius.xs}
|
4px
|
--avatar-container-border-radius-square
|
avatar.container.background
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--avatar-container-background
|
avatar.container.border-color
|
color |
{global.border.level.edge.level.1}
|
light
#D7D3D4
dark
#282828
|
--avatar-container-border-color
|
avatar.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--avatar-container-border-width
|
Part initials (4)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
avatar.initials.color
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--avatar-initials-color
|
avatar.initials.typography.small
|
typography |
{body.family}{body.size.2xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":10,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-small-font-family--avatar-initials-typography-small-font-size--avatar-initials-typography-small-font-weight--avatar-initials-typography-small-line-height--avatar-initials-typography-small-letter-spacing
|
avatar.initials.typography.medium
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-medium-font-family--avatar-initials-typography-medium-font-size--avatar-initials-typography-medium-font-weight--avatar-initials-typography-medium-line-height--avatar-initials-typography-medium-letter-spacing
|
avatar.initials.typography.large
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-large-font-family--avatar-initials-typography-large-font-size--avatar-initials-typography-large-font-weight--avatar-initials-typography-large-line-height--avatar-initials-typography-large-letter-spacing
|
Parts without tokens: image (they inherit from their parent).