@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

    Supporting content between the message and actions.

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

    Semantic tone or a CSS color. Colors the surface, text, border, and dismiss control. Custom colors use an inline CSS variable; under a CSP that blocks style attributes, provide that variable through external CSS instead.

    '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

    Show the built-in Dismiss control. Set false when the notice is permanent or another action requests dismissal through data-banner-dismiss.

    true
    role?: string

    Host role. Use 'status' for polite announcements or 'alert' for urgent ones.

    'status'
    dismissed?: boolean

    Controlled visibility. Set true in onDismiss to accept a request, or keep false to reject it. Set false to show the notice again. Dismissal hides the host and retains its children; it does not unmount them.

    defaultDismissed?: boolean

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

    onDismiss?: () => void

    Dismissal request from the close control or a data-banner-dismiss action. Controlled Banner stays visible until dismissed changes. Uncontrolled Banner applies an uncanceled request itself.

    className?: string

    Adds CSS classes to the root element and preserves its existing classes.

    style?: CSSProperties

    Inline CSS styles on the root element.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute, shown as a browser tooltip on hover.

    slot?: string

    Named slot in a parent web component, such as slot="header" in 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