Account
NotificationItem
One system notice in the Avisos panel (Figma "Notification Item" 192:1979): the severity icon, title, body and how long ago, an unread dot and, when it is about a person, a chevron.
The whole row is the control: opening it marks it read (and goes to the person), so nothing needs a second button. Notices are account, billing, connection and consent, never risk (that lives in Alertas).
<NotificationItem severity="critical" opensSubject title="Não confirmamos o vínculo declarado" body="A checagem não confirmou seu vínculo com a Lia." time={<time dateTime={iso}>há 6 segundos</time>} onClick={open} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Notification Item
boolean
boolean
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).
Severity · Critical
| Read | Default | Hover |
|---|---|---|
| Unread | ||
| Read |
Severity · Warning
| Read | Default | Hover |
|---|---|---|
| Unread | ||
| Read |
Severity · Info
| Read | Default | Hover |
|---|---|---|
| Unread | ||
| Read |
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 |
|---|---|---|---|
| severity? | NotificationSeverity | "info" | Figma `Severity`. |
| read? | boolean | false | Figma Read=Read: the dot goes and the words recede (through colour, so the text keeps its contrast). |
| title | ReactNode | — | Figma "Title" (Label/Small). |
| body? | ReactNode | — | Figma "Body": one or two sentences. |
| time? | ReactNode | — | Figma "When": how long ago, in words. Pass a `<time dateTime="…">`. |
| opensSubject? | boolean | false | Figma `Opens dependent`: the row takes you to the person, so a chevron closes it. |
| severityLabel? | string | — | Accessible name of the severity icon. Defaults to NOTIFICATION_SEVERITY_LABELS. |
| unreadLabel? | string | "Não lida" | Accessible name of the unread dot. Default "Não lida". |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | A route instead of an action (`<NextLink href="/…" />`): it stays a link. |
| className? | string | — | |
| type? | "button" | "reset" | "submit" | "button" |