Result

When To Use

Use when important operations need to inform the user to process the results and the feedback is more complicated.

Examples

<!-- prettier-ignore -->

<code src="./demo/success.tsx">Success</code> <code src="./demo/info.tsx">Info</code> <code src="./demo/warning.tsx">Warning</code> <code src="./demo/403.tsx">403</code> <code src="./demo/404.tsx">404</code> <code src="./demo/500.tsx">500</code> <code src="./demo/error.tsx">Error</code> <code src="./demo/customIcon.tsx">Custom icon</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/component-token.tsx" debug>Component Token</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
classNames	Customize class for each semantic structure inside the component. Supports object or function	Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>	-
extra	Operating area	ReactNode	-
icon	Custom back icon	ReactNode	-
status	Result status, decide icons and colors	success | error | info | warning | 404 | 403 | 500	info
styles	Customize inline style for each semantic structure inside the component. Supports object or function	Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>	-
subTitle	The subTitle	ReactNode	-
title	The title	ReactNode	-

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Result"></ComponentTokenTable>