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

# InlineBanner

> A compact banner with a message, icon, and optional action.

`InlineBanner` uses the secondary [Banner](/ui/primitives/feedback/banner) treatment. Its message truncates with a tooltip for the full text. Your application owns whether the banner is rendered.

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

export const SyncBanner = ({ onRetry }: { onRetry: () => void }) => (
  <InlineBanner
    color="danger"
    message="Contact sync could not finish."
    button={{ title: 'Retry sync', onClick: onRetry }}
  />
);
```

`button` accepts `title`, `onClick`, `disabled`, `hidden`, and an `Icon` component. `LeftIcon` changes the leading icon. `embedded` adjusts the banner for an embedded surface. Use a separate live-region wrapper when changes should be announced.

## Props

<ParamField body="button" type="{ title?: string | undefined; onClick?: (() => void) | undefined; hidden?: boolean | undefined; disabled?: boolean | undefined; Icon?: IconComponent | undefined; }">
  Optional action with title, onClick, hidden, disabled, and Icon fields.
</ParamField>

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

<ParamField body="color" type="&#x22;blue&#x22; | &#x22;danger&#x22;">
  Banner palette color. An omitted color uses Banner’s default.
</ParamField>

<ParamField body="embedded" type="boolean" default="false">
  Uses the embedded banner appearance.
</ParamField>

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

<ParamField body="message" type="string" required>
  Message, truncated with its full text available in a tooltip.
</ParamField>