InlineBanner

InlineBanner uses the secondary Banner treatment. Its message truncates with a tooltip for the full text. Your application owns whether the banner is rendered.

import { InlineBanner } from 'twenty-ui/components';

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

button accepts title, onClick, disabled, hidden, and an Icon component. LeftIcon changes the leading icon. embedded adjusts the banner for an embedded surface. Use a separate live-region wrapper when changes should be announced.

Props

{ title?: string | undefined; onClick?: (() => void) | undefined; hidden?: boolean | undefined; disabled?: boolean | undefined; Icon?: IconComponent | undefined; }

Optional action with title, onClick, hidden, disabled, and Icon fields.

string

Class applied to the banner.

"blue" | "danger"

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

boolean

default:"false"

Uses the embedded banner appearance.

IconComponent

Leading icon component. Defaults to the information icon.

string

required

Message, truncated with its full text available in a tooltip.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props