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

# Callout

> A message with semantic styling, an optional action, and dismissal.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Callout` combines a title, optional description, icon, and action. Choose `info`, `warning`, `error`, `neutral`, or `success` to match the message.

```tsx theme={null}
import { Callout } from 'twenty-ui/components';

export const ImportNotice = ({ onReview }: { onReview: () => void }) => (
  <Callout
    variant="warning"
    title="Some records need attention"
    description="Review the missing email addresses before importing."
    action={{ label: 'Review records', onClick: onReview }}
    isClosable
  />
);
```

Closing a closable callout updates its internal visibility and calls `onClose`. Remount it to show it again. `fullWidth` fills its container. Use `Icon` to replace the default help icon.

The component does not add live-region semantics or forward native attributes. Put it in a separately labeled or announced region when that is needed.

<StoryEmbed storyId="ui-feedback-callout--default" title="Callout example" height={280} />

## Props

<ParamField body="action" type="{ label: string; onClick: () => void; }">
  Optional footer action with a label and onClick callback.
</ParamField>

<ParamField body="description" type="string">
  Optional supporting text. Empty strings are hidden.
</ParamField>

<ParamField body="fullWidth" type="boolean" default="false">
  Fills the available container width.
</ParamField>

<ParamField body="Icon" type="IconComponent">
  Leading icon component. Defaults to the help icon.
</ParamField>

<ParamField body="isClosable" type="boolean" default="false">
  Shows a close button that hides the callout until it is remounted.
</ParamField>

<ParamField body="onClose" type="(() => void)">
  Called after the close button hides the callout.
</ParamField>

<ParamField body="title" type="string" required>
  Main message displayed beside the icon.
</ParamField>

<ParamField body="variant" type="&#x22;error&#x22; | &#x22;info&#x22; | &#x22;neutral&#x22; | &#x22;success&#x22; | &#x22;warning&#x22;" required>
  Semantic appearance: info, warning, error, neutral, or success.
</ParamField>