Result

Used to provide feedback on the results of a series of operations or tasks.

Basic Usage

Use icon, title, and sub-title to render a standard result state.

Basic Usage

Different Statuses

Switch between success, warning, error, and info via the icon prop.

Different Statuses

Custom Content

Use slots such as icon and extra to customize the result page. The default slot is typically used for action buttons.

Custom Content

Use in Nuxt

YhResult works well in Nuxt 3/4 as a regular feedback component and also fits global error pages such as error.vue.

Use in Nuxt (Mock error.vue)

API

Props

Prop	Description	Type	Default
title	Title	string	undefined
sub-title	Sub-title	string	undefined
icon	Result icon type	'success' | 'warning' | 'error' | 'info'	'info'
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Events

This component does not expose component events.

Slots

Slot	Description
default	Actions area
icon	Custom icon content
title	Custom title content
sub-title	Custom sub-title content
extra	Extra content area between sub-title and actions

Expose

This component does not expose public instance methods or properties.

Theme Variables

Variable	Description	Default
--yh-result-padding	Container padding	40px 30px
--yh-result-icon-size	Icon size	72px
--yh-result-icon-margin	Icon margin bottom	20px
--yh-result-title-size	Title font size	20px
--yh-result-title-color	Title color	var(--yh-text-color-primary, #303133)
--yh-result-subtitle-size	Sub-title font size	14px
--yh-result-subtitle-color	Sub-title color	var(--yh-text-color-secondary, #909399)

Type Exports

Name	Description
YhResultProps	Component props type
YhResultSlots	Component slots type
YhResultIconType	Result icon union type
YhResultInstance	Component instance type