> ## 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/feedback';

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
    closeLabel="Dismiss import notice"
  />
);
```

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} />

## Labels and dismissal

Your application owns `title`, `description`, and `action.label`. Set `isClosable` to show a dismiss button and pass `closeLabel` for its accessible name. The default is `Close`.

Pass labels from your application's localization system. Twenty UI does not require an i18n provider.

## Props

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

<ParamField body="closeLabel" type="string" default="Close">
  Accessible name of the dismiss button. Defaults to `Close`.
</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>


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