Foundations
Icon
The DS icon wrapper (Figma "Icon/*" instances on Components 162:3, no component set).
Fixes the size from the 4 px grid, keeps colour on currentColor and decides the accessibility role in one place.
<Icon icon={ShieldCheck} size="20" label="Protegido" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Icon
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).
Glyph · shield-check
| Size | Icon |
|---|---|
| 12 | |
| 14 | |
| 16 | |
| 20 | |
| 24 |
Glyph · plus
| Size | Icon |
|---|---|
| 24 |
Glyph · x
| Size | Icon |
|---|---|
| 24 |
Glyph · arrow-right
| Size | Icon |
|---|---|
| 24 |
Glyph · check
| Size | Icon |
|---|---|
| 24 |
Glyph · google
| Size | Icon |
|---|---|
| 24 |
Glyph · apple
| Size | Icon |
|---|---|
| 24 |
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 |
|---|---|---|---|
| icon | IconGlyph | — | The glyph: a lucide-react icon or a provider icon from this family. |
| size? | "12" | "14" | "16" | "20" | "24" | null | "16" | |
| label? | string | — | Accessible name. Without it the icon is decorative (aria-hidden), which is right whenever text next to it already says the same thing. |
| className? | string | — |