Details

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

<Details label="How does the 120-day processing time work?" 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 surfacable in a page search (cmd/ctrl-f).

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 in forms to help explain information only some users need
• position immediately after the related content
• use instead of Tool tip or Modal where possible
• use short sentences
• include a clear description
• consider using an accordion if there are multiple paragraphs of content
• use sparingly, and only when users need additional information.

Don't

• use for information all users need to read
• 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" 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" iconBefore onBodyAlt>
		<Text as="p">
			This is a small paragraph of text that is supplementary to the main page
			content.
		</Text>
	</Details>
</Box>

Related components

• Accordion – An accordion hides sections of content users can choose to see if it is relevant to them.
• 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.