Result

Feedback panel for success, error, warning, and info outcomes, with a status icon, title, subtitle, and extra actions.

import { Result } from '@lobehub/ui/base-ui';

NPM Source Edit

Feedback

Basic

Loading preview

APIs

Result properties

extra: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
icon: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
ref: null | (instance: HTMLElement | 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] | RefObject<HTMLElement | null>
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).
status: 'success' | 'warning' | 'info' | 'error'
Defaults to "info".
subTitle: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
title: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.

Result renders a native <section>. All standard section HTML attributes including className, style, and ref are forwarded to the root element.

Migrating from antd Result

The core migration is an import replacement:

import { Result } from '@lobehub/ui/base-ui';

<Result status="success" subTitle="Your changes have been saved." title="Success" />;

icon overrides the default status icon. extra renders a row of actions below the subtitle, and children render below that.