> ## 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.

# Banner

> Display a prominent information or error message with optional actions.

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

`Banner` lays out a message and optional controls across its container. Use `color="blue"` for information and `color="danger"` for errors. The `primary` variant uses a solid background; `secondary` uses a translucent background.

<StoryEmbed storyId="ui-feedback-banner--default" title="Banner example" />

## Usage

```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

type ImportFailureProps = { onRetry: () => void };

export const ImportFailure = ({ onRetry }: ImportFailureProps) => (
  <Banner color="danger" variant="secondary">
    <Text>Some records could not be imported.</Text>
    <Button onClick={onRetry}>Retry import</Button>
  </Banner>
);
```

## Visibility and announcements

The application owns the message, action handlers, and whether the banner is rendered. `Banner` has no open state or built-in close button.

```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';

type ImportNoticeProps = { message: string | null };

export const ImportNotice = ({ message }: ImportNoticeProps) => (
  <div role="status">
    {message !== null && <Banner variant="secondary">{message}</Banner>}
  </div>
);
```

Keep the live-region wrapper mounted before updating its message. Use `role="alert"` only for urgent messages that need immediate attention. The banner itself does not add a live region or forward `role` and other native attributes.

## Props

<ParamField body="children" type="ReactNode" required>
  Message and optional actions displayed inside the banner.
</ParamField>

<ParamField body="className" type="string">
  CSS class applied to the banner.
</ParamField>

<ParamField body="color" type="&#x22;blue&#x22; | &#x22;danger&#x22;" default="blue">
  Blue information treatment or danger treatment.
</ParamField>

<ParamField body="variant" type="&#x22;primary&#x22; | &#x22;secondary&#x22;" default="primary">
  Primary solid treatment or secondary translucent treatment.
</ParamField>