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>

CTAs

CTAs can be added through the children prop as well.

<Callout
  className="mt-4"
  title="This automation rule changed"
  variant="info"
  iconName="lightning"
>
  <div className="flex flex-row gap-8">
    <Button
      variant="primaryInfo"
      text="Update with rule value"
      onClick={() => {}}
    />
    <Button
      variant="secondaryNeutral"
      text="Ignore"
      label="Ignore"
      onClick={() => {}}
    />
  </div>
</Callout>