Callout

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

<Callout title="Callout heading">
	<Text as="p">Description of the callout.</Text>
</Callout>

Use callout to draw a user’s attention to important snippets of static information.

Do

• use sparingly as they are intrusive
• use to help users quickly scan to find essential information in a long text page
• use to reiterate important content
• use for quotes in long-form content
• use different tones and variants on the same page to convey information hierarchy
• use to format content not included in the main text such as support and contact details, checklists, definitions and ‘Did you know?’ content.

Don’t

• embed form inputs in Callouts
• make them the focus of content; they are a supporting tool
• use for errors and alerts – use a Page alert or Section alert instead
• use for primary content, as it may be missed
• mix colour palettes.

Tones

Callouts can be used to convey different tones of information. The tone of a callout is conveyed through the background colour and icon.

Neutral Callout

The default tone of a callout is neutral.

<Callout title="Callout heading">
	<Text as="p">Description of the callout.</Text>
</Callout>

By default, neutral Callouts make use of the shade background token, which must be paired with the normal body background.

If the neutral Callout 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.

<Stack background="bodyAlt" padding={2} gap={1}>
	<Text>An area with `bodyAlt` background</Text>
	<Callout title="Callout heading" tone="neutral" onBodyAlt>
		<Text as="p">Description of the callout.</Text>
	</Callout>
</Stack>

Information Callout

Use an info tone to highlight information which is important for users.

<Callout title="Callout heading" tone="info">
	<Text as="p">Description of the callout.</Text>
</Callout>

Compact

Compact version of the callout can be used when there is limited space, such as inside of a Control group to let the user know that, based on their response, they may need to provide additional information.

<ControlGroup label="Control group label" required block>
	<Radio checked={false}>Radio option one</Radio>
	<Radio checked={true}>Radio option two</Radio>
	<ConditionalFieldContainer>
		<Callout title="Callout heading" tone="info" variant="compact">
			<Text as="p">Description of the callout.</Text>
		</Callout>
	</ConditionalFieldContainer>
	<Radio checked={false}>Text message</Radio>
</ControlGroup>

Feature

The feature variant of the callout can be used to draw even more emphasis to the content.

<Callout title="Feature Callout heading" tone="info" variant="feature">
	<Text as="p">Description of the callout.</Text>
</Callout>

Related components

• Global alert – Global alerts display prominent service or system wide messages at the top of the screen.
• Page alert – Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.

Related patterns

• Messaging – Messaging conveys contextual information to the user, provides information in relation to a service or interaction, and provides feedback in response to their actions or the current system status.