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} />

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.