Agriculture Design System
Design System for the Export Service


Callouts are an excerpt of text used to draw attention to important or interesting information. They should not be confused with Page alerts.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/callout';
Open in Playroom, opens in a new tab
<Callout title="Callout heading">
	<Text as="p">Description of the callout.</Text>

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


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


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


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>

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>

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>


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>
		<Callout title="Callout heading" tone="info" variant="compact">
			<Text as="p">Description of the callout.</Text>
	<Radio checked={false}>Text message</Radio>


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