@mantine/core/lib/components/EmptyState/EmptyState.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
import { EmptyStateActions, EmptyStateActionsFactory, EmptyStateActionsProps, EmptyStateActionsStylesNames } from './EmptyStateActions/EmptyStateActions';
import { EmptyStateDescription, EmptyStateDescriptionFactory, EmptyStateDescriptionProps, EmptyStateDescriptionStylesNames } from './EmptyStateDescription/EmptyStateDescription';
import { EmptyStateIndicator, EmptyStateIndicatorFactory, EmptyStateIndicatorProps, EmptyStateIndicatorStylesNames } from './EmptyStateIndicator/EmptyStateIndicator';
import { EmptyStateTitle, EmptyStateTitleFactory, EmptyStateTitleProps, EmptyStateTitleStylesNames } from './EmptyStateTitle/EmptyStateTitle';
export type EmptyStateStylesNames = 'root' | 'body' | EmptyStateIndicatorStylesNames | EmptyStateTitleStylesNames | EmptyStateDescriptionStylesNames | EmptyStateActionsStylesNames;
export type EmptyStateVariant = 'filled' | 'light';
export type EmptyStateCssVariables = {
    root: '--empty-state-indicator-size' | '--empty-state-gap' | '--empty-state-title-fz' | '--empty-state-description-fz' | '--empty-state-indicator-bg' | '--empty-state-indicator-color';
};
export interface EmptyStateProps extends BoxProps, StylesApiProps<EmptyStateFactory>, ElementProps<'div', 'title'> {
    /** Controls indicator size, gap between elements and font sizes of title and description @default 'md' */
    size?: MantineSize;
    /** Content alignment. `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it @default 'center' */
    align?: 'left' | 'center' | 'right';
    /** Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color */
    variant?: EmptyStateVariant;
    /** Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants @default theme.primaryColor */
    color?: MantineColor;
    /** Title content, rendered inside `EmptyState.Title` */
    title?: React.ReactNode;
    /** Description content, rendered inside `EmptyState.Description` */
    description?: React.ReactNode;
    /** Icon or illustration, rendered inside `EmptyState.Indicator` */
    icon?: React.ReactNode;
    /** If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop @default false */
    withIndicatorBackground?: boolean;
    /** `EmptyState` compound components, rendered after the shorthand props content */
    children?: React.ReactNode;
}
export type EmptyStateFactory = Factory<{
    props: EmptyStateProps;
    ref: HTMLDivElement;
    stylesNames: EmptyStateStylesNames;
    vars: EmptyStateCssVariables;
    variant: EmptyStateVariant;
    staticComponents: {
        Indicator: typeof EmptyStateIndicator;
        Title: typeof EmptyStateTitle;
        Description: typeof EmptyStateDescription;
        Actions: typeof EmptyStateActions;
    };
}>;
export declare const EmptyState: import("../..").MantineComponent<{
    props: EmptyStateProps;
    ref: HTMLDivElement;
    stylesNames: EmptyStateStylesNames;
    vars: EmptyStateCssVariables;
    variant: EmptyStateVariant;
    staticComponents: {
        Indicator: typeof EmptyStateIndicator;
        Title: typeof EmptyStateTitle;
        Description: typeof EmptyStateDescription;
        Actions: typeof EmptyStateActions;
    };
}>;
export declare namespace EmptyState {
    type Props = EmptyStateProps;
    type StylesNames = EmptyStateStylesNames;
    type CssVariables = EmptyStateCssVariables;
    type Variant = EmptyStateVariant;
    type Factory = EmptyStateFactory;
    namespace Indicator {
        type Props = EmptyStateIndicatorProps;
        type StylesNames = EmptyStateIndicatorStylesNames;
        type Factory = EmptyStateIndicatorFactory;
    }
    namespace Title {
        type Props = EmptyStateTitleProps;
        type StylesNames = EmptyStateTitleStylesNames;
        type Factory = EmptyStateTitleFactory;
    }
    namespace Description {
        type Props = EmptyStateDescriptionProps;
        type StylesNames = EmptyStateDescriptionStylesNames;
        type Factory = EmptyStateDescriptionFactory;
    }
    namespace Actions {
        type Props = EmptyStateActionsProps;
        type StylesNames = EmptyStateActionsStylesNames;
        type Factory = EmptyStateActionsFactory;
    }
}