Callout
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Callout · Backoffice
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).
Product · Backoffice
| Tone | Callout · Backoffice |
|---|---|
| Neutral | Nenhum orçamento definido Defina um teto mensal para ver o consumo aqui. |
| Info | Simulação, nada foi alterado A regra marcaria 4 alertas nos últimos 7 dias. |
| Attention | Faltam 2 IPs pra 40 famílias Compre antes de 29 out para não derrubar sessões. |
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? | "attention" | "info" | "neutral" | null | "neutral" | |
| title? | ReactNode | — | "Faltam 2 IPs pra 40 famílias". |
| action? | ReactNode | — | A Button or Link under or beside the text; wrap writes in WriteOnly. |
| className? | string | — | |
| children? | ReactNode | — | The body. |
BalanceCard
A supplier's prepaid balance against the next renewal (Figma "Backoffice / Balance Card" 2058:55415): Ok, Shortfall, Stale.
DefinitionRow
A label and its value (Figma "Definition Row" 2132:11102, Product=Backoffice): summary and quote lines in the Buy IPs dialog, the facts of a drawer, a Balance Card's lines.