Notification badge
Notification badges are visual indicators for numeric values.
import { ... } from '@ag.ds-next/react/notification-badge';
<Flex gap={1}> <NotificationBadge tone="neutral" value={16} /> <NotificationBadge tone="action" value={8} /> <NotificationBadge tone="action" max={99} value={123} /> </Flex>
Do
- use to indicate numeric values such as message count
- place next to associated content – for example, Messages (1)
Don’t
- change the colours or create new ones
Max values
Use the max
property where the count is expected to exceed a reasonable number, and the exact count is not particularly valuable to the user.
<NotificationBadge tone="action" max={99} value={123} />
Colour
AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.
This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).
Light palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}> <Stack gap={1.5}> <H4>Notification badges: on light background</H4> <Flex gap={1}> <NotificationBadge tone="neutral" value={16} /> <NotificationBadge tone="action" value={8} /> <NotificationBadge max={99} tone="action" value={123} /> </Flex> </Stack> </Box>
Dark palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark"> <Stack gap={1.5}> <H4>Notification badges: on dark background</H4> <Flex gap={1}> <NotificationBadge tone="neutral" value={16} /> <NotificationBadge tone="action" value={8} /> <NotificationBadge max={99} tone="action" value={123} /> </Flex> </Stack> </Box>
Related components
- Indicator dot – Indicator dots are small, decorative, badge-like indicators used to call attention to an item, such as an unread message.
- Status badge – Status badges are visual indicators used to highlight an item’s status for quick recognition.
- Tags – Tags classify content using keywords or labels. They are added to a web page, asset or content to help users search for related content quickly and easily.