GlobalBanner
A page-wide message about the account or the service (Figma "Global Banner" 2056:53695): payment failed, protection stopped, a new plan.
The glyph follows the tone and the title says it in words. Danger is an alert (it blocks protection); the rest are polite statuses. Desktop uses dense buttons; Phone uses 44 px buttons and a 44 px dismiss target.
<GlobalBanner tone="attention" title="Pagamento não aprovado"
description="A proteção continua até 25/10. Atualize o cartão pra ela não parar."
action={<Button size="sm" variant="brand">Atualizar cartão</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Global Banner
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 · Attention
| Viewport | Global Banner |
|---|---|
| Desktop | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
| Phone | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
Tone · Danger
| Viewport | Global Banner |
|---|---|
| Desktop | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
| Phone | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
Tone · Info
| Viewport | Global Banner |
|---|---|
| Desktop | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
| Phone | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
Tone · Ok
| Viewport | Global Banner |
|---|---|
| Desktop | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
| Phone | Pagamento não aprovado A proteção continua até 25/10. Atualize o cartão pra ela não parar. |
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" | "info" | "ok" | null | "attention" | |
| viewport? | "desktop" | "phone" | null | "desktop" | |
| title | ReactNode | — | What happened, in a few words ("Pagamento não aprovado"). |
| description? | ReactNode | — | What it means and what to do (Figma `showDescription`). |
| meta? | ReactNode | — | When it happened ("há 12 min", Figma `showMeta`). |
| action? | ReactNode | — | The main action, a Button (Figma `showAction`). |
| secondaryAction? | ReactNode | — | A second, quieter action (Figma `showSecondaryAction`). |
| dismissible? | boolean | false | Shows the close button (Figma `dismissible`); needs `dismissLabel`. |
| dismissLabel? | string | — | The close button's spoken name ("Fechar aviso"). |
| open? | boolean | — | Shown or dismissed (controlled). |
| defaultOpen? | boolean | true | Initial visibility when uncontrolled. |
| onOpenChange? | ((open: boolean) => void) | — | Called with false when the person dismisses it. |
| className? | string | — |