Backoffice
KpiTile
A headline number (Figma "Backoffice / KPI Tile" 2056:48793): 220 × 122 card, or "In strip" (borderless, no radius) inside a divided stat strip.
States Default (with Delta None, Positive, Negative, Stable), Empty, Loading, Definition. The delta is an arrow plus a word, never colour alone. Width follows the grid it sits in.
<KpiTile label="Contas ativas" value="24" hint="12 em trial" delta={{ tone: "positive", label: "12%" }} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / KPI Tile
string
boolean
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).
Delta · None
| Surface | Default | Empty | Loading | Definition |
|---|---|---|---|---|
| Card | Contas ativas 24 12 em trial | Contas ativas — Sem base ainda | Contas ativas | Contas ativas 24 12 em trial |
Delta · Positive
| Surface | Default | Empty | Loading | Definition |
|---|---|---|---|---|
| Card | Contas ativas 2412% 12 em trial |
Delta · Negative
| Surface | Default | Empty | Loading | Definition |
|---|---|---|---|---|
| Card | Contas ativas 248% 12 em trial |
Delta · Stable
| Surface | Default | Empty | Loading | Definition |
|---|---|---|---|---|
| Card | Contas ativas 24estável 12 em trial |
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 |
|---|---|---|---|
| label | string | — | "Contas ativas". |
| value? | ReactNode | — | The number, already formatted ("24", "US$ 2,17"). Ignored when empty or loading. |
| hint? | ReactNode | — | Figma "hint" (showHint): one line under the number, "12 em trial". When empty, the line that says why there is no number ("Sem base ainda"). |
| delta? | KpiDelta | — | Figma "Delta" axis (only in the Default state). |
| state? | "default" | "empty" | "loading" | "default" | Figma State: Empty shows "—" (never a made-up zero); Loading shows bars in place and sets aria-busy. |
| surface? | "card" | "in-strip" | null | "card" | |
| definition? | string | — | Figma "showInfo" + State=Definition: what the number counts, behind an info button next to the label. |
| definitionLabel? | string | — | Name of the info button, e.g. "O que conta Contas ativas". Required with `definition`. |
| definitionOpen? | boolean | — | The definition tooltip's open state (base-ui naming). |
| defaultDefinitionOpen? | boolean | — | |
| onDefinitionOpenChange? | ((open: boolean) => void) | — | |
| className? | string | — |