Banner

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

import { Banner } from 'twenty-ui/primitives/feedback';

export const SyncBanner = () => (
  <Banner status="info" variant="solid">
    Contact sync is temporarily paused. Your saved records remain available.
  </Banner>
);

Actions and appearance

import { Banner } from 'twenty-ui/primitives/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';

export const SyncBanner = ({ onRetry }: { onRetry: () => void }) => (
  <Banner
    status="error"
    variant="soft"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={<Banner.Action onClick={onRetry}>Retry sync</Banner.Action>}
  >
    Contact sync could not finish.
  </Banner>
);

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.

import { Banner } from 'twenty-ui/primitives/feedback';

export const SyncResult = () => (
  <Banner
    status="success"
    variant="soft"
    role="status"
    aria-live="polite"
    aria-atomic="true"
    render={<section aria-label="Sync result" />}
  >
    Contacts are up to date.
  </Banner>
);

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

ReactNode

Optional trailing ReactNode. Banner.Action supplies a small outline action that inherits the resolved banner color; arbitrary controls are also accepted.

ReactNode

Caller-provided content, including text, links and controls.

string

Class merged onto the root div or composed element.

"blue" | "gray" | "green" | "orange" | "red"

default:"status palette"

Palette override: gray, blue, green, orange or red. When omitted, status selects the corresponding palette.

ReactNode

Optional leading ReactNode. The caller supplies decorative or accessible icon semantics.

Ref<HTMLDivElement>

Ref to the root div, or to the DOM element supplied through render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, BannerState>

Base UI element or render callback. The callback receives native props/ref and resolved status, variant and color state.

"error" | "info" | "neutral" | "success" | "warning"

default:"info"

Feedback meaning: neutral, info, success, warning or error. Defaults to info. Does not assign a role or live region.

CSSProperties

Inline styles applied to the root div or composed element.

"soft" | "solid"

default:"solid"

Solid or soft appearance. Defaults to solid, independently of status.

string | ((state: ButtonState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

ReactNode

Decorative content displayed after the label.

boolean

default:"false"

Whether the button should be focusable when disabled.

boolean

Expands the button to fill its container width.

string

Destination URL. Renders a native anchor when render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.

boolean

Shows a loading indicator and disables activation.

"center" | "end" | "start"

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.

boolean

default:"true"

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.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

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.

AriaRole

Role of the root element. Use link for custom navigation renderers.

ShortcutDefinition

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

string

Localized text between sequence steps. Defaults to then.

ReactNode

Decorative content displayed before the label.

CSSProperties | ((state: ButtonState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

Actions and appearance

Migration

Props

Banner.Action

​Usage

​Actions and appearance

​Migration

​Props

​Banner.Action

Usage

Actions and appearance

Migration

Props

Banner.Action