@antadesign/anta
    Preparing search index...

    Interface ExpanderPropsUnreviewed

    Public props for the <Expander> disclosure. title is the always- visible summary; children is the collapsible body.

    interface ExpanderProps {
        title: ReactNode;
        level?: 1 | 2 | 3 | 4 | 5 | 6;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        priority?: "primary"
        | "secondary"
        | "tertiary";
        outdent?: boolean;
        actions?: ReactNode;
        indicator?: ReactNode | { closed: ReactNode; open: ReactNode };
        indicatorPlacement?: "start" | "end";
        disabled?: boolean;
        round?: boolean | number | string;
        open?: boolean;
        defaultOpen?: boolean;
        onStateChange?: (
            event: CustomEvent,
            detail: { next: boolean; prev: boolean },
        ) => void;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        id?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    title level? tone? priority? outdent? actions? indicator? indicatorPlacement? disabled? round? open? defaultOpen? onStateChange? className? style? children? id? slot? tabIndex? key?
    title: ReactNode

    Summary (header) content. A string is rendered with the level type scale; pass a node (e.g. a <Title>) for full control or real heading semantics in the document outline.

    level?: 1 | 2 | 3 | 4 | 5 | 6

    Heading type scale applied to a string title (mirrors <Title>'s levels). Visual only — for outline semantics, pass a <Title> as the title.

    5
    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 text and (on filled priorities) the surface to the matching palette; a custom color keeps its hue while lightness/chroma are pinned. 'neutral' (the default) is the same as omitting it.

    'neutral'
    priority?: "primary" | "secondary" | "tertiary"

    Surface emphasis. secondary (the default) is a subtle fill; primary is a more pronounced card; tertiary is transparent (the bare disclosure).

    'secondary'
    outdent?: boolean

    Align the title and body with surrounding content on a tertiary expander. With the default start indicator, the mark hangs in the gutter; an end indicator stays inside its edge.

    actions?: ReactNode

    Header actions rendered outside the toggle trigger. With an end indicator, actions sit between the title and indicator.

    indicator?: ReactNode | { closed: ReactNode; open: ReactNode }

    Built-in disclosure mark, a decorative node, or separate closed/open visuals. Other primitive values leave the indicator empty. Custom nodes are passive; use actions for controls.

    'chevron'
    indicatorPlacement?: "start" | "end"

    Place the disclosure mark before the title or after the actions.

    'start'
    disabled?: boolean

    Disables the header: not clickable or focusable, hover affordance off, text dimmed. The open state freezes as-is — disabling an open expander keeps it open. actions stay live; disable them separately if needed.

    round?: boolean | number | string

    Round corners sized to half the folded (header) height: a pill when folded, and — when expanded — the same corner radius rather than a bigger stadium. The element measures the header, so it tracks custom header content. Pass a number (px) or CSS length string for a fixed radius that overrides the measurement (and skips it) in both states.

    open?: boolean

    Controlled open state. When provided, the consumer owns open/close. Selecting the summary requests a change through onStateChange; omit open for uncontrolled use.

    defaultOpen?: boolean

    Initial open state for the uncontrolled case.

    onStateChange?: (
        event: CustomEvent,
        detail: { next: boolean; prev: boolean },
    ) => void

    Fired before the open state changes. event is the cancelable statechange — call event.preventDefault() to veto an uncontrolled toggle (e.g. confirm before closing). detail.next is the requested open state, detail.prev the current one (booleans). In controlled mode, apply detail.next to open to accept, or do nothing to reject.

    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.

    children?: ReactNode

    Child elements. When provided, replaces the component's default label/content.

    id?: string

    HTML id attribute.

    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