@antadesign/anta
    Preparing search index...

    Interface BannerPropsUnreviewed

    Props for the <Banner> message strip. message leads, children precede actions, and align places the row.

    interface BannerProps {
        message?: ReactNode;
        actions?: ReactNode;
        children?: ReactNode;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        align?: "start"
        | "center";
        round?: boolean | number | string;
        closable?: boolean;
        role?: string;
        dismissed?: boolean;
        defaultDismissed?: boolean;
        onDismiss?: () => void;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    message? actions? children? tone? align? round? closable? role? dismissed? defaultDismissed? onDismiss? className? style? id? title? slot? tabIndex? key?
    message?: ReactNode

    Leading message: a string at the banner type scale or any node.

    actions?: ReactNode

    Trailing controls (buttons, links) rendered as a compact row after the message and children.

    children?: ReactNode

    Free content placed BETWEEN the message and the actions.

    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Semantic tone, or any literal CSS color ('#ff1493', 'rebeccapurple') for a one-off custom tone. Named tones re-point the surface, text, and border color (used if you opt into a border); a custom color keeps its hue while lightness/chroma are pinned. 'neutral' (the default) is the same as omitting it.

    'neutral'
    align?: "start" | "center"

    Positions the content row. 'start' aligns it to the inline edge; 'center' centers it. Wrapped message text follows the selected alignment.

    'start'
    round?: boolean | number | string

    Rounded corners for a standalone, floating banner (border-radius: 999px, which clamps to a stadium) instead of the edge-to-edge strip. Still borderless by default. Pass a number (px) or a CSS length string for a custom radius.

    closable?: boolean

    Whether the trailing ✕ dismiss button is present. false removes it — drive dismissal yourself (a controlled dismissed, or your own control) instead. It removes the built-in ✕ without making the banner un-dismissible.

    true
    role?: string

    ARIA role for the strip host. 'status' (a polite live region, so the notice reaches assistive tech) by default; pass 'alert' for an urgent notice that should interrupt, or a landmark role.

    'status'
    dismissed?: boolean

    Controlled dismissed state. When provided, the consumer owns visibility: the banner follows this prop only, and clicking ✕ requests dismissal (reject by not updating). Requires onDismiss — controlled mode never self-hides, so without a handler to set dismissed the ✕ can't close the banner. Leave undefined for uncontrolled.

    defaultDismissed?: boolean

    Initial dismissed state for the uncontrolled case (read once on mount).

    onDismiss?: () => void

    Fired when the user dismisses the banner (clicks ✕). Uncontrolled, the banner hides itself and this notifies. Controlled, use it to accept the request — set dismissed to true (or ignore to reject); pair it with dismissed, or the banner can't be closed.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties