Agriculture Design System
Design System for the Export Service


A horizontal rule that separates blocks of content.

View in FigmaView in StorybookView 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.


  • change the colour of divider.


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