> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# <Callout />

[https://morph-data-components-storybook.netlify.app/iframe.html?args=\&globals=\&id=layout-components-callout--callout-story](https://morph-data-components-storybook.netlify.app/iframe.html?args=\&globals=\&id=layout-components-callout--callout-story)

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

```tsx theme={"dark"}
<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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.