Result

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

Basic Usage

The simplest way to use it, by setting the icon, title, and sub-title props.

Operation Successful

Your order has been submitted successfully, expected delivery in 3-5 business days.

Basic Usage

Different Statuses

Set different status icons via the icon prop: success, warning, error, info.

Success

Submitted successfully

Warning

Please note this operation

Error

Submission failed, please try again

Information

This is a prompt message

Different Statuses

Custom Content

Customize the icon and extra content areas via #icon and #extra slots. The default slot is used for action buttons.

🔍

404

Sorry, the page you visited does not exist

Please check if the URL is correct, or return to home.

Custom Content

Use in Nuxt

Result component fully supports Nuxt 3/4 SSR rendering. The following example demonstrates using Result as the error.vue global error page in Nuxt, combined with Nuxt-exclusive APIs like useError and clearError to dynamically respond to different HTTP error codes.

404

Sorry, the page you visited does not exist

Nuxt Usage (Mock error.vue)

SSR Notes:

• ✅ All Props and styles fully supported
• ✅ SVG icons render correctly
• ✅ Slot content (icon, title, sub-title, extra, default) fully rendered
• ✅ Can be used as Nuxt's error.vue error page
• ✅ Dynamic status (icon type switching) works normally

SSR Safety

Result component has passed complete SSR tests, ensuring that server-side and client-side rendering are completely consistent with no Hydration errors.

API

Props

Prop	Description	Type	Default
title	Title	string	—
subTitle	Sub-title	string	—
icon	Icon type	'success' | 'warning' | 'error' | 'info'	'info'
themeOverrides	Theme overrides	ComponentThemeVars	—

Slots

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

Theme Variables

Result supports customizing local styles by overriding the following CSS variables:

Variable Name	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)