Divider

A horizontal rule that separates blocks of content.

View in Figma View in Storybook View in Github

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

Open in Playroom, opens in a new tab

<Divider />

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

Open in Playroom, opens in a new tab

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

Edit this page