@atlaskit/heading/dist/types/heading.d.ts

A heading is a typography component used to display text in different sizes and formats.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type ReactNode } from 'react';
import { type CompiledStyles } from '@compiled/react';
type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
export type HeadingProps = {
    /**
     * Determines which text styles are applied. A corresponding HTML element is automatically applied from h1 to h6 based on the size.
     * This can be overriden using the `as` prop to allow for more flexibility.
     */
    size: HeadingSize;
    /**
     * Allows the component to be rendered as the specified HTML element, overriding a default element set by the `size` prop.
     */
    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
    /**
     * Token representing text color with a built-in fallback value.
     * Will apply inverse text color automatically if placed within a Box with bold background color.
     * Defaults to `color.text`.
     */
    color?: HeadingColor;
    /**
     * The text of the heading.
     */
    children: ReactNode;
    /**
     * Unique identifier for the heading HTML element.
     */
    id?: string;
    /**
     * A `testId` prop is provided for specified elements, which is a unique
     * string that appears as a data attribute `data-testid` in the rendered code,
     * serving as a hook for automated tests.
     */
    testId?: string;
};
/**
 * Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
 */
declare const headingSizeStyles: {
    readonly xxlarge: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-xxlarge)';
        };
    }>;
    readonly xlarge: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-xlarge)';
        };
    }>;
    readonly large: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-large)';
        };
    }>;
    readonly medium: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-medium)';
        };
    }>;
    readonly small: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-small)';
        };
    }>;
    readonly xsmall: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-xsmall)';
        };
    }>;
    readonly xxsmall: CompiledStyles<{
        '&&': {
            font: 'var(--ds-font-heading-xxsmall)';
        };
    }>;
};
type HeadingSize = keyof typeof headingSizeStyles;
/**
 * __Heading__
 *
 * Heading is a typography component used to display text in defined sizes and styles.
 *
 * @example
 *
 * ```jsx
 * <Heading size="xxlarge">Page title</Heading>
 * ```
 */
declare const Heading: React.ForwardRefExoticComponent<React.PropsWithoutRef<HeadingProps> & React.RefAttributes<HTMLHeadingElement>>;
export default Heading;