Agriculture Design System
Design System for the Export Service

Notification badge

Notification badges are visual indicators for numeric values.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/notification-badge';
Open in Playroom, opens in a new tab
<Flex gap={1}>
	<NotificationBadge tone="neutral" value={16} />
	<NotificationBadge tone="action" value={8} />
	<NotificationBadge tone="action" max={99} value={123} />


  • use to indicate numeric values such as message count
  • place next to associated content – for example, Messages (1)


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