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
• use in conditionally revealed checkbox or radio groups
• 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 an Accordion.

<Accordion>
	<AccordionItem title="Accordion 1">
		<AccordionItemContent>
			<Text as="p">Here is the accordion content.</Text>
		</AccordionItemContent>
	</AccordionItem>
	<AccordionItem isInitiallyOpen title="Accordion 2">
		<AccordionItemContent>
			<Stack gap="1">
				<Text as="p">
					Here is the conditionally revealed content with callout.
				</Text>
				<TextLink href="#">Light link</TextLink>
				<Callout title="Callout heading" tone="info" variant="compact">
					<Text as="p">Description of the callout.</Text>
				</Callout>
			</Stack>
		</AccordionItemContent>
	</AccordionItem>
	<AccordionItem title="Accordion 3">
		<AccordionItemContent>
			<Text as="p">Here is the accordion content.</Text>
		</AccordionItemContent>
	</AccordionItem>
	<AccordionItem title="Accordion 4">
		<AccordionItemContent>
			<Text as="p">Here is the accordion content.</Text>
		</AccordionItemContent>
	</AccordionItem>
</Accordion>

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>

Customising the title

By default, Callout renders its title as an h2. However, should the need arise, you can change the title’s semantic tag to an h3, for example, by passing the CalloutTitle component to the title prop. For information on maintaining proper heading levels, refer to Structuring headings and labels.

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

<Callout
	tone="info"
	variant="feature"
	title={<CalloutTitle as="h3">Callout heading</CalloutTitle>}
>
	<Text as="p">Description of the callout.</Text>
</Callout>;

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}>
	<Stack
		as="ul"
		background="body"
		css={{ listStyle: 'none' }}
		gap={1}
		padding={1.5}
	>
		<Box as="li">
			<Callout title="Callout: on body background">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
		<Box as="li">
			<Callout title="Callout: info tone on body background" tone="info">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
	</Stack>
	<Stack as="ul" background="bodyAlt" css={{ listStyle: 'none' }} padding={1.5}>
		<Box as="li">
			<Callout background="shadeAlt" title="Callout: on bodyAlt background">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack
		as="ul"
		background="body"
		css={{ listStyle: 'none' }}
		gap={1}
		padding={1.5}
	>
		<Box as="li">
			<Callout title="Callout: on body background">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
		<Box as="li">
			<Callout title="Callout: info tone on body background" tone="info">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
	</Stack>
	<Stack as="ul" background="bodyAlt" css={{ listStyle: 'none' }} padding={1.5}>
		<Box as="li">
			<Callout background="shadeAlt" title="Callout: on bodyAlt background">
				<Text as="p">Description of the callout.</Text>
			</Callout>
		</Box>
	</Stack>
</Box>

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.