Callout

Callouts are used to communicate a state that affects a system, feature or page.

Variant

The Callout comes with four visual styles: info (default), alert, warning, and success.

<>
  <Callout title="Info callout title" variant="info" />
  <Callout title="Alert callout title" variant="alert" />
  <Callout title="Warning callout title" variant="warning" />
  <Callout title="Success callout title" variant="success" />
</>

Content

Use the children prop to add any content to the callout.

<Callout title="Callout title">
  On the budget, the amount of the invoice will be proportionally reflected over
  the period.
</Callout>