Callout

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 Figma View in Storybook View in Github

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

Apply aria-labels to custom icons

You can use custom icons by passing an icon component to the icon prop.

When doing this, you must apply the correct aria attributes to the icon.

<Callout
	title="Callout heading"
	icon={
		<CalendarIcon aria-hidden="false" aria-label="Calendar" color="border" />
	}
>
	<Text as="p">Description of the callout.</Text>
</Callout>

Edit this page