InlineBanner

InlineBanner builds on 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.

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

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

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' }}
  />
);

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

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. BaseUIEvent extends the React event with preventBaseUIHandler() and baseUIHandlerPrevented.

string

Class applied to the banner.

"blue" | "danger"

default:"blue"

Banner palette color. An omitted color uses Banner’s default.

boolean

default:"false"

Removes the bottom margin from standard banners. Compact banners have no bottom margin.

IconComponent

Leading icon component. Defaults to the information icon.

string

required

Message text. Standard banners truncate with a focusable tooltip; compact banners wrap.

"compact" | "standard"

default:"standard"

Standard full-width banner or compact wrapping message with a 512px maximum content width.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props