Actions
IconButton
Icon-only button (Figma "Icon Button" 167:105).
Same looks as Button.
<IconButton aria-label="Fechar" variant="ghost" size="44" icon={<X />} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Icon Button
string
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).
Variant · Default
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
Variant · Brand
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
Variant · Outline
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
Variant · Secondary
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
Variant · Ghost
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
Variant · Destructive
| Size | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| XS | ||||||
| SM | ||||||
| Default | ||||||
| LG | ||||||
| 40 | ||||||
| 44 | ||||||
| 48 |
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 |
|---|---|---|---|
| variant? | "brand" | "default" | "destructive" | "ghost" | "outline" | "secondary" | null | "default" | |
| size? | "40" | "44" | "48" | "default" | "lg" | "sm" | "xs" | null | "default" | |
| disabled? | boolean | false | |
| loading? | boolean | false | Busy: the icon turns into the spinner, presses are ignored, focus stays. |
| icon | ReactNode | — | The Figma "Icon" swap: a lucide element. Size and colour come from the button. |
| className? | string | — |