Notification badge

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.