Feedback
Callout
A short, static note with an optional title (Figma "Callout" 2132:11078): the trial note in onboarding, a dry-run or budget note in the backoffice.
It is not a live status (use Notice or Toast for news) and not interactive. product="backoffice" is the dense console size.
<Callout title="7 dias grátis a partir da primeira conexão">A cobrança só começa depois.</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
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).
Product · App
| Tone | Callout |
|---|---|
| Brand | 7 dias grátis a partir da primeira conexão A cobrança só começa depois que a Marlene estiver protegida. |
Product · Backoffice
| Tone | Callout |
|---|---|
| Neutral | Nenhum orçamento definido para este mês. |
| Info | Dry run: nada é aplicado até você confirmar. |
| Attention | Faltam 2 IPs pra 40 famílias. |
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 |
|---|---|---|---|
| product? | "app" | "backoffice" | null | "app" | |
| tone? | "attention" | "brand" | "info" | "neutral" | null | "brand" | |
| title? | ReactNode | — | Optional bold first line ("7 dias grátis a partir da primeira conexão"). |
| icon? | ReactNode | — | Replaces the tone's glyph (a lucide element). |
| className? | string | — | |
| children? | ReactNode | — |