Details

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

<Details label="This is an example of a long label" iconBefore>
	<Text as="p">
		This is a small paragraph of text that is supplementary to the main page
		content.
	</Text>
</Details>

Information is visible only when the widget is toggled into an ‘open’ state. Unlike Accordion, inner content is discoverable in a page search (cmd/ctrl-f) in some browsers, like Google Chrome.

Details should only be used for 1 piece of content. If more sections are required, use an Accordion or Tab.

Setting the iconBefore prop to true will render the InfoIcon before the label.

Do

• use sparingly, and only when users need additional information
• position the component before a form and avoid using it between between from controls
• position immediately after the related content
• use instead of tooltips or Modal where possible
• use short sentences
• include a clear description
• consider using an accordion if there are multiple paragraphs of content.

Don’t

• hide crucial information
• include other components inside a Details area
• use a dark theme callout on a light theme.

With icon

Setting the iconBefore prop to true will render the InfoIcon before the label.

<Details label="Details label" iconBefore>
	<Text as="p">
		This is a small paragraph of text that is supplementary to the main page
		content.
	</Text>
</Details>

On Body Alt

If the Details component is placed on a page with bodyAlt background, set the onBodyAlt prop to true. This ensures the correct shade background token is used by the component.

<Box background="bodyAlt" padding={1.5}>
	<Details label="Details label" iconBefore onBodyAlt>
		<Text as="p">
			This is a small paragraph of text that is supplementary to the main page
			content.
		</Text>
	</Details>
</Box>

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

This component has a 'bodyAlt' variant. Components with a 'bodyAlt' variant utiliseshadeAlt to highlight interface components and content that sit on 'bodyAlt' background. shadeAlt is also used to fill interactive components, ensuring sufficient contrast is maintained for hover states.

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<>
		<Box background="body" padding={1.5}>
			<Details
				iconBefore
				label="Details: on light body background"
				onBodyAlt
			>
				<Text as="p">
					This is a small paragraph of text that is supplementary to the main page
					content.
				</Text>
			</Details>
		</Box>
		<Box background="bodyAlt" padding={1.5}>
			<Details
				iconBefore
				label="Details: on light bodyAlt background"
				onBodyAlt
			>
				<Text as="p">
					This is a small paragraph of text that is supplementary to the main page
					content.
				</Text>
			</Details>
		</Box>
	</>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<>
		<Box background="body" padding={1.5}>
			<Details
				iconBefore
				label="Details: on dark body background"
				onBodyAlt
			>
				<Text as="p">
					This is a small paragraph of text that is supplementary to the main page
					content.
				</Text>
			</Details>
		</Box>
		<Box background="bodyAlt" padding={1.5}>
			<Details
				iconBefore
				label="Details: on dark bodyAlt background"
				onBodyAlt
			>
				<Text as="p">
					This is a small paragraph of text that is supplementary to the main page
					content.
				</Text>
			</Details>
		</Box>
	</>
</Box>

Related components

• Accordion – An accordion lets users show and hide sections of related content.
• Tabs – Tabs are used to categorise content into seperate views. A user can navigate between each section of content, displaying one section at a time.