> ## 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 button or link.

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

`InlineBanner` builds on [Banner](/ui/primitives/feedback/banner). Its standard appearance fills the available width and truncates the message. Keyboard focus, pointer hover, or touch reveals the full message in a tooltip. Your application owns whether the banner is rendered.

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

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

<StoryEmbed storyId="ui-feedback-inlinebanner--default" title="Inline banner with an action" height={280} />

Use `variant="compact"` for wrapping text, closer spacing, and a maximum content width of 512px. This appearance has no bottom margin. Both appearances support `color="blue"` and `color="danger"`.

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

export const ConnectionBanner = () => (
  <InlineBanner
    variant="compact"
    message="Connect your account to sync contacts."
    button={{ title: 'Connection settings', href: '/settings/accounts' }}
  />
);
```

<StoryEmbed storyId="ui-feedback-inlinebanner--compact-link" title="Compact banner with a destination link" height={280} />

`button` accepts `title`, `onClick`, `disabled`, `hidden`, and an `Icon` component. Supply `href` for a native destination link, with optional `target`, `rel`, and `download`. Pair `href` with `render` for an application-owned router link. An action without `href` remains a native button. Use `aria-label` when the action has no visible title.

`LeftIcon` changes the leading icon. `embedded` removes the standard banner's bottom margin. Use a separate live-region wrapper when changes should be announced.

## Props

<ParamField body="button" type="InlineBannerButtonProps">
  Optional button or destination link. All fields are optional:

  * `title` (`string`): visible action label.
  * `onClick` (`(event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => void`): activation handler, including keyboard activation.
  * `href` (`string`): destination URL; selects native link semantics.
  * `render` (`ReactElement | ((props: HTMLProps, state: { disabled: boolean }) => ReactElement)`): custom root element or renderer. Preserve an anchor when `href` is set, or a native button otherwise. `HTMLProps` includes native element attributes and its ref.
  * `target` (`string`): link browsing context, such as `_blank`.
  * `rel` (`string`): link relationship, such as `noopener noreferrer`.
  * `download` (native anchor attribute): use `true` to download the destination or a `string` to suggest a filename.
  * `disabled` (`boolean`): prevents activation.
  * `hidden` (`boolean`): omits the action from the banner.
  * `aria-label` (`string`): accessible action name, needed when no visible title is supplied.
  * `Icon` (`IconComponent`): decorative icon component displayed before the title.

  Action and link fields use the corresponding [Button props](/ui/primitives/input/button). `BaseUIEvent` extends the React event with `preventBaseUIHandler()` and `baseUIHandlerPrevented`.
</ParamField>

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

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

<ParamField body="embedded" type="boolean" default="false">
  Removes the bottom margin from standard banners. Compact banners have no bottom margin.
</ParamField>

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

<ParamField body="message" type="string" required>
  Message text. Standard banners truncate with a focusable tooltip; compact banners wrap.
</ParamField>

<ParamField body="variant" type="&#x22;compact&#x22; | &#x22;standard&#x22;" default="standard">
  Standard full-width banner or compact wrapping message with a 512px maximum content width.
</ParamField>


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