Navigation
NoticesBell
The Avisos bell (Figma "Notifications Bell (Avisos)" 175:371): system notices only (account, billing, connection, consent), never risk, which lives in Alertas.
The badge is brand purple (yellow is for risk). A 48 px button named with the count; it opens a panel (desktop) or a drawer (phone) through render, e.g. <Popover.Trigger render={<NoticesBell count={3} />} />.
<NoticesBell count={3} onClick={openNotices} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Notifications Bell (Avisos)
boolean
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).
Viewport · Desktop
| Unread | Default | Open | Focus |
|---|---|---|---|
| True | |||
| False |
Viewport · Phone
| Unread | Default | Open | Focus |
|---|---|---|---|
| True | |||
| False |
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 | 0 | Figma `Count`: unread notices. Zero hides the badge (Figma Unread=False). |
| viewport? | NavViewport | — | Figma `Viewport`: Desktop is a rounded square, Phone a circle. Leave it out to follow the space. |
| open? | boolean | false | Figma State=Open, when not driven by a popup (which sets it itself). |
| label? | string | "Avisos" | Accessible name before the count. Default "Avisos". |
| className? | string | — |