<Callout> is a component for highlighting specific information on a page.

<Grid cols="1">
  <Callout title="Info" variant="default">
    Default callout has blue color
  </Callout>
  <Callout title="Error" variant="error">
    Error callout has red color
  </Callout>
  <Callout title="Neutral" variant="neutral">
    Neutral callout has grey color
  </Callout>
  <Callout title="Warning" variant="warning">
    Warning callout has yellow color
  </Callout>
  <Callout title="Success" variant="success">
    Success callout has green color
  </Callout>
</Grid>

​
Properties

​
title
String
required

Specifies the title of the Callout.

​
variant
String
required

Specifies the variant of the Callout. The default is default.