Feedback
Loader
A small busy indicator (Figma "Loader" 179:503): a spinning arc or three pulsing dots.
Use it inside a button, a row or a toast while something finishes; use Skeleton for content that has a shape. Under reduced motion it holds still.
<Loader tone="brand" size="22" label="Carregando alertas" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Loader
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 · Spinner
| Size · Tone | Loader |
|---|---|
| 16 · Default | |
| 16 · Brand | |
| 16 · OnColor | |
| 22 · Default | |
| 22 · Brand | |
| 22 · OnColor | |
| 28 · Default | |
| 28 · Brand | |
| 28 · OnColor |
Variant · Dots
| Size · Tone | Loader |
|---|---|
| 16 · Default | |
| 16 · Brand | |
| 16 · OnColor | |
| 22 · Default | |
| 22 · Brand | |
| 22 · OnColor | |
| 28 · Default | |
| 28 · Brand | |
| 28 · OnColor |
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? | "dots" | "spinner" | null | "spinner" | |
| size? | "16" | "22" | "28" | null | "16" | |
| tone? | "brand" | "default" | "on-color" | null | "default" | |
| label? | string | — | Says what is loading ("Carregando alertas"). With it the loader is a polite status; without it, it is decorative (the caller says it). |
| className? | string | — |