@antadesign/anta
    Preparing search index...

    Interface TitlePropsUnreviewed

    Common props for JSX component wrappers.

    interface TitleProps {
        level?: 1 | 2 | 3 | 4 | 5 | 6;
        priority?: "primary" | "secondary" | "tertiary" | "quaternary";
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        truncate?: boolean
        | number;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        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
    level? priority? tone? truncate? className? style? children? id? title? slot? tabIndex? key?
    level?: 1 | 2 | 3 | 4 | 5 | 6

    Heading level, 1-6. Drives font-size, line-height, and vertical rhythm. Also surfaced to assistive tech via aria-level (h1 is typically reserved for the page title).

    2
    priority?: "primary" | "secondary" | "tertiary" | "quaternary"

    Visual priority. Maps to text-1..text-4 (primary = text-1).

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

    Color tint. neutral (the default) is the untinted --text-{N} scale; a named tone applies the matching --text-{N}-{tone} palette. Any literal CSS color ('#ff1493', 'rebeccapurple') is a one-off custom tone — its hue is kept while lightness/chroma are pinned per priority in oklch.

    neutral
    truncate?: boolean | number

    Truncate with a trailing ellipsis. true (or 1) clamps to a single line; any integer ≥ 2 clamps to that many lines; 0 or a negative value means no truncation. A clipped JSX Title shows its text content in a tooltip by default. Nest a <Tooltip> to provide your own tooltip instead.

    Vlad Korobov

    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.

    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