> ## 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
> Feedback content with independent status, appearance, and palette.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`Banner` lays out caller-provided content, an optional `icon` node and an optional `action` node. `status` describes feedback meaning: `neutral`, `info`, `success`, `warning` or `error`. `variant` selects `solid` or `soft` appearance. An explicit `color` overrides the status palette without changing its meaning.
Defaults are `status="info"` and `variant="solid"`. The default status palettes are gray, blue, green, orange and red, respectively.
## Usage
```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';
export const SyncBanner = () => (
Contact sync is temporarily paused. Your saved records remain available.
);
```
## Actions and appearance
```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';
export const SyncBanner = ({ onRetry }: { onRetry: () => void }) => (
}
action={Retry sync}
>
Contact sync could not finish.
);
```
`Banner.Action` provides a small outline button that inherits the banner’s displayed color, including explicit palette overrides and solid appearances. It supports Button interactions, links, refs and custom rendering. The `action` slot also accepts arbitrary controls.
The root target is a `div`. Native attributes, event handlers, `className`, `style` and `ref` apply to that root. `render` accepts a Base UI element or callback; the callback receives native props and ref plus resolved `status`, `variant` and `color` state. Preserve the supplied props and ref when composing another element.
```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';
export const SyncResult = () => (
}
>
Contacts are up to date.
);
```
Status does not automatically assign `role`, `aria-live` or announcements. Choose them at the caller when updates should be announced. Supply accessible names for controls and mark decorative icon nodes with `aria-hidden`. The caller owns visibility and dismissal.
## Migration
Replace `variant="primary"` with `variant="solid"` and `variant="secondary"` with `variant="soft"`. Replace `color="danger"` with `status="error"`, or `color="red"` when only the palette should change. Blue information banners can use `status="info"`.
## Props
Optional trailing ReactNode. Banner.Action supplies a small outline action that inherits the resolved banner color; arbitrary controls are also accepted.
Caller-provided content, including text, links and controls.
Class merged onto the root div or composed element.
Palette override: gray, blue, green, orange or red. When omitted, status selects the corresponding palette.
Optional leading ReactNode. The caller supplies decorative or accessible icon semantics.
Ref to the root div, or to the DOM element supplied through render.
Base UI element or render callback. The callback receives native props/ref and resolved status, variant and color state.
Feedback meaning: neutral, info, success, warning or error. Defaults to info. Does not assign a role or live region.
Inline styles applied to the root div or composed element.
Solid or soft appearance. Defaults to solid, independently of status.
### Banner.Action
CSS class applied to the element, or a function that
returns a class based on the component's state.
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
Decorative content displayed after the label.
Whether the button should be focusable when disabled.
Expands the button to fill its container width.
Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.
Shows a loading indicator and disables activation.
Where the loading indicator appears. `center` hides the content while preserving its layout space; `start` and `end` keep children and the opposite icon visible and replace the corresponding icon with the spinner.
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in `href` anchor defaults to false; an explicit value takes precedence.
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use `nativeButton={false}` and `role="link"` for a custom navigation anchor. Router integration belongs to the caller.
Role of the root element. Use `link` for custom navigation renderers.
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
Localized text between sequence steps. Defaults to then.
Decorative content displayed before the label.
Style applied to the element, or a function that
returns a style object based on the component's state.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.