Divider

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

<Divider />

Do

• use to create visual space and separation between blocks of content like form field sets in the main content area
• divide and logically group content sections to enhance clarity and organisation
• position above buttons groups at the bottom of a form to give prominence to the action area.

Don’t

• change the colour of divider.

Example

<Stack gap={3}>
	<Fieldset legend={<H2>Business details</H2>}>
		<FormStack>
			<TextInput label="Australian Business Number (ABN)" />
			<TextInput label="Australian Company Number (ACN)" />
		</FormStack>
	</Fieldset>
	<Divider />
	<Fieldset legend={<H2>Entity details</H2>}>
		<FormStack>
			<TextInput label="Entity name" />
			<TextInput label="Entity number" />
		</FormStack>
	</Fieldset>
	<Divider />
	<ButtonGroup>
		<Button type="submit">Submit form</Button>
		<Button variant="secondary">Cancel</Button>
	</ButtonGroup>
</Stack>

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} padding={1.5}>
		<H4>Divider: on light background</H4>
		<Divider />
	</Stack>
</Box>

Dark palette

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

Related components

• Divider with text – A horizontal rule used to visually separate content with a label.