FactRow
One fact in a card (Figma "Fact Row" 2056:59995): an icon and a sentence whose lead is bold.
Tone colours the icon only (Ok green, Danger red for a connection that stopped protection, Muted grey); the text is always ink, so the sentence carries the meaning. Layout Columns keeps the lead in its own column; Inline runs lead and text as one sentence (the Dashboard default). Use inside StatCard.Facts, which is the list.
<FactRow tone="ok" icon={<CircleCheck />} lead="Terça · Marlene">falso parente · resolvido por você em 8 min</FactRow>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Fact Row
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).
Tone · Default
| Layout | Fact Row |
|---|---|
| Columns | Há 1 h · Liapossível aliciamento · aberto |
| Inline | Há 1 h · Lia possível aliciamento · aberto |
Tone · Ok
| Layout | Fact Row |
|---|---|
| Columns | Terça · Marlenefalso parente · resolvido por você em 8 min |
| Inline | Terça · Marlene falso parente · resolvido por você em 8 min |
Tone · Attention
| Layout | Fact Row |
|---|---|
| Columns | Agora · Marlenepossível golpe do Pix · aberto |
| Inline | Agora · Marlene possível golpe do Pix · aberto |
Tone · Muted
| Layout | Fact Row |
|---|---|
| Columns | Conexão:ficou 3 h fora na quinta e voltou sozinha. |
| Inline | Conexão: ficou 3 h fora na quinta e voltou sozinha. |
Tone · Danger
| Layout | Fact Row |
|---|---|
| Columns | Marlene:o WhatsApp dela desconectou e a proteção parou. |
| Inline | Marlene: o WhatsApp dela desconectou e a proteção parou. |
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" | "danger" | "default" | "muted" | "ok" | null | "default" | |
| layout? | "columns" | "inline" | null | "inline" | |
| icon | ReactNode | — | Figma icon (a lucide element, 16 px); its colour follows `tone`. |
| lead? | ReactNode | — | Figma "lead": the bold start ("Há 1 h · Lia", "Conexão:"). |
| children | ReactNode | — | Figma "text": the rest of the sentence. |
| className? | string | — |