Agriculture Design System
Beta
Design System for the Export Service

Indicator dot

Indicator dots are small, decorative, badge-like indicators used to call attention to an item, such as an unread message.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/indicator-dot';
Open in Playroom, opens in a new tab
<IndicatorDot />

Do

  • use to indicate something needs attention – for example, unread messages

Don’t

  • change the colours or create new ones
  • use on its own. It should be considered as part of a wider composition.

Usage

An Indicator dot should not be used on its own, as it gives no context. It should instead be considered as part of a wider composition.

Open in Playroom, opens in a new tab
<Flex flexDirection="column" as="ul">
	<Flex
		as="li"
		borderColor="muted"
		borderY
		css={{
			backgroundColor: boxPalette.systemInfoMuted,
		}}
		flexDirection="column"
		gap={0.5}
		justifyContent="space-between"
		padding={1.5}
		width="100%"
	>
		<Flex justifyContent="space-between">
			<Text fontSize="md" fontWeight="bold">
				Action required
			</Text>
			<Flex alignItems="center" gap={0.5}>
				<Text color="muted">10:15am</Text>
				<IndicatorDot tone="action" />
				<VisuallyHidden>Unread message</VisuallyHidden>
			</Flex>
		</Flex>
		<Text fontSize="sm">
			Your application to register establishment Orange Meat Works needs more
			information. Please provide your ABN/ACN by 12 June 2024 to avoid delays.
		</Text>
		<div>
			<TextLink href="#details">View details</TextLink>
		</div>
	</Flex>
</Flex>
  • Notification badge – Notification badges are visual indicators for numeric values.
  • 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.
Edit this page