Backoffice
NotificationBell
The operational alerts bell in the console header (Figma "Backoffice / Notification Bell" 2056:42086): 32 px, Default, Hover, Focus.
It links to the alerts queue; system notices are not here. The hit area grows to 44 px on touch screens. Hidden by default in the header (Figma showNotifications off) until the alerts queue ships.
<NotificationBell aria-label="Alertas operacionais, 3 novos" count={3} href="/operacao/alertas" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Notification Bell
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).
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 |
|---|---|---|---|
| count? | number | — | Figma "count" (showCount): the unread number. Nothing when zero. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link to the alerts queue, e.g. `render={<NextLink href="/operacao/alertas" />}`. |
| className? | string | — |