Empty

Empty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons, in default, dashed, and stack variants. It's commonly used to indicate that there's no data or content to display.

import { Empty } from '@lobehub/ui';

NPM Source Edit

Data Display

Default

Loading preview

With Icon

Loading preview

With Emoji

Loading preview

With Action Button

Loading preview

Dashed

Loading preview

Stack

Loading preview

Page

Loading preview

APIs

Empty

Empty properties

action: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
actionProps: Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
align: 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline' | string & {} | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset' | 'normal' | 'self-end' | 'self-start' | 'anchor-center'
description: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
descriptionProps: Omit<TextProps, 'children'>
emoji: string
icon: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | LucideIcon | FC<any>
iconColor: string
image: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
imageProps: Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
imageSize: number
Defaults to 48.
ref: null | RefObject<HTMLDivElement | null> | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
title: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
titleProps: Omit<TextProps, 'children'>
type: 'page' | 'default'
Defaults to "default".
variant: 'dashed' | 'default' | 'stack'
Defaults to "default".

Also accepts all native HTML and ARIA attributes.

Empty renders a native <div>. All standard div HTML attributes including onClick, aria-*, data-*, style, and ref are forwarded to the root element.