Components
Notification
A count or a dot pinned to a glyph when something needs attention.
iOS
Android
Web
import Notification from "swshd/Notification";2
12
Notification pins a count or a dot to a glyph when something needs attention. It is the one place the brand accent is used as a fill.
Don't use it to classify — that is Badge.
With a count the notification is a 16 px accent pill with label-sm digits; without one it is a 7 px dot. A 2 px ring in bg.surface cuts it out of whatever it overlaps.
2
24
The parent positions the notification — absolutely, over an icon's top corner. SidebarItem does it for you: pass notification and notificationLabel.
import Notification from "swshd/Notification";
<Notification count={2} accessibilityLabel="2 pending invites" />The notification is a role="img" named by accessibilityLabel. SidebarItem folds it into the row's accessible name instead of announcing it twice.
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | — | Digits to show; omit for a dot. |
accessibilityLabel | string | — | What the notification means ("2 pending invites"); the digits alone are not a name. |
testID | string | — | data-testid on web. |