> ## 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
> Inline feedback with node content, icons, and actions.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`InlineBanner` composes [Banner](/ui/primitives/feedback/banner) with a rounded inline layout and a decorative information icon. It shares Banner's independent `status`, `variant`, `color`, `icon` and `action` contracts. Its default appearance is `soft` and its default status is `info`.
## Usage
```tsx theme={null}
import { InlineBanner } from 'twenty-ui/components/feedback';
export const ModelsBanner = ({ onConfigure }: { onConfigure: () => void }) => (
Configure models
}
>
No AI models are enabled.
);
```
The `standard` layout fills the available width. Plain string children truncate, with keyboard focus, pointer hover or touch revealing the full string in a tooltip. Rich node children render directly, so embedded links and controls retain their own semantics. Compose explicit typography when rich content needs truncation.
Use `layout="compact"` for wrapping content, closer spacing and a maximum content width of 512px. Add `fullWidth` to remove that cap and fill the available parent width, including padding and borders. It defaults to `false` and does not change the standard layout, which already fills its parent. It has no bottom margin. Layout is independent of `solid` or `soft` appearance. `embedded` removes the standard layout's bottom margin.
```tsx theme={null}
import { InlineBanner } from 'twenty-ui/components/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';
export const ConnectionBanner = () => (
}
action={
Connection settings
}
>
Connect your account to sync contacts.
);
```
`InlineBanner.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 props, `className`, `style` and `ref` target that root; Base UI `render` can compose another element and receives resolved Banner state. `action` accepts any ReactNode, including multiple controls with their complete Button or link APIs. `icon={null}` removes the default icon.
The caller owns whether the banner is rendered and whether changes should be announced. Supply `role="status"` and `aria-live="polite"`, or an appropriate live-region wrapper, when needed. Status does not assign live-region semantics. Name action controls and mark decorative custom icons with `aria-hidden`.
## Migration
Replace `message` with `children`, `LeftIcon={Icon}` with `icon={}`, and `button` configuration with an `action` node. Use `InlineBanner.Action` to keep action styling aligned with the banner. Replace `variant="compact"` with `layout="compact"`; standard is now the default layout. Use `status="error"` for error meaning or `color="red"` for a palette override.
## Props
Optional trailing ReactNode. InlineBanner.Action supplies the shared banner action preset and inherits the resolved banner color; arbitrary controls are also accepted.
Caller-provided content. Standard plain strings truncate with a focusable tooltip; rich nodes render directly. Compact content wraps.
Class merged onto the root div or composed element.
Gray, blue, green, orange or red palette override. An omitted color follows status.
Removes the standard bottom margin. Compact layouts have no bottom margin.
Fills the available parent width, including padding and borders, and removes the compact layout's 512px maximum. Defaults to false; standard layout already fills its parent.
Leading ReactNode. Defaults to a decorative information icon. Pass null to omit it.
Standard full-width layout or compact wrapping layout with a 512px maximum content width. Defaults to standard.
Ref to the root div, or to the DOM element supplied through render.
Base UI root element or render callback, receiving native props/ref and resolved Banner state.
Feedback meaning: neutral, info, success, warning or error. Defaults to info. Roles and announcements remain caller-owned.
Inline styles applied to the root div or composed element.
Solid or soft appearance, independently of status and layout. Defaults to soft.
### InlineBanner.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.