Indicator dot

import { ... } from '@ag.ds-next/react/indicator-dot';

<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.

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

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>Indicator dot: on light background</H4>
		<IndicatorDot />
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Indicator dot: on dark background</H4>
		<IndicatorDot />
	</Stack>
</Box>

Related components

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