Foundations
Avatar
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Avatar
JF
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Tone · Neutral
| Shape · Size | Avatar |
|---|---|
| Circle · 24 | JF |
| Circle · 32 | JF |
| Circle · 40 | JF |
Tone · Brand
| Shape · Size | Avatar |
|---|---|
| Circle · 24 | JF |
| Circle · 28 | JF |
| Circle · 32 | JF |
| Circle · 40 | JF |
| Circle · 56 | JF |
| Square · 36 | JF |
| Square · 40 | JF |
| Square · 56 | JF |
Tone · Warm
| Shape · Size | Avatar |
|---|---|
| Circle · 28 | JF |
| Circle · 40 | JF |
| Circle · 56 | JF |
| Square · 36 | JF |
| Square · 56 | JF |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone? | "brand" | "neutral" | "warm" | null | "neutral" | |
| shape? | "circle" | "square" | null | "circle" | |
| size? | "24" | "28" | "32" | "36" | "40" | "56" | null | "40" | |
| className? | string | — |