jiaiyan Naive UI Result Component
Result component for displaying operation results, status pages, and feedback with customizable icons and descriptions.
When to Use
Use this component when:
- Status pages: Display HTTP error pages (404, 403, 500, 418)
- Operation results: Show success, error, warning, or info results
- Feedback pages: Provide visual feedback for completed actions
- Empty states: Display meaningful empty or error states
When to Invoke
Invoke this skill when:
- User needs to display a result page
- User wants to show HTTP error pages
- User needs to display operation success/failure feedback
- User wants to customize result icons
- User asks about creating status pages
Features
- Preset Status Types: info, success, warning, error, 404, 403, 500, 418
- Customizable Icon: Replace default icon with custom content
- Size Options: small, medium, large, and huge sizes
- Flexible Content: Custom title, description, and footer
- Built-in Icons: High-quality icons from twemoji
API Reference
Result Props
| Name | Type | Default | Description |
|---|---|---|---|
| description | string |
undefined |
Description text. |
| size | 'small' | 'medium' | 'large' | 'huge' |
'medium' |
Size of the result. |
| status | 'info' | 'success' | 'warning' | 'error' | '404' | '403' | '500' | '418' |
'info' |
Status type. |
| title | string |
undefined |
Title text. |
Result Slots
| Name | Parameters | Description | Version |
|---|---|---|---|
| default | () |
Result page content information. | |
| footer | () |
Information at the bottom of the result page. | |
| icon | () |
Custom icon content area. | 2.24.0 |
Basic Usage
404 Not Found
<template>
<n-result
status="404"
title="404 Not Found"
description="You know life is always ridiculous."
>
<template #footer>
<n-button>Find Something Funny</n-button>
</template>
</n-result>
</template>
403 Forbidden
<template>
<n-result
status="403"
title="403 Forbidden"
description="Some of the doors are always close to you."
>
<template #footer>
<n-button>Take It Easy</n-button>
</template>
</n-result>
</template>
500 Server Error
<template>
<n-result
status="500"
title="500 Server Error"
description="Server error may prove that you need hiring more developers."
>
<template #footer>
<n-button>Spread Money Out</n-button>
</template>
</n-result>
</template>
Success Result
<template>
<n-result status="success" title="Success" description="Operation completed successfully">
<template #footer>
<n-button type="primary" @click="handleContinue">Continue</n-button>
</template>
</n-result>
</template>
<script setup>
const handleContinue = () => {
console.log('Continue clicked')
}
</script>
Warning Result
<template>
<n-result
status="warning"
title="Warning"
description="People seldom see it until it comes true."
>
<template #footer>
<n-button>Understood</n-button>
</template>
</n-result>
</template>
Error Result
<template>
<n-result status="error" title="Error" description="Something went wrong">
<template #footer>
<n-button type="error" @click="handleRetry">Retry</n-button>
</template>
</n-result>
</template>
<script setup>
const handleRetry = () => {
console.log('Retry clicked')
}
</script>
Different Sizes
<template>
<n-space vertical>
<n-result status="404" title="Small" description="Small size" size="small" />
<n-result status="404" title="Medium" description="Medium size" size="medium" />
<n-result status="404" title="Large" description="Large size" size="large" />
<n-result status="404" title="Huge!" description="Huge size" size="huge" />
</n-space>
</template>
Custom Icon
<template>
<n-result
title="Custom Icon"
description="You can put any content in the icon slot"
>
<template #icon>
<n-icon size="80" color="#18a058">
<CheckmarkCircle />
</n-icon>
</template>
<template #footer>
<n-button type="primary">Great!</n-button>
</template>
</n-result>
</template>
<script setup>
import { CheckmarkCircle } from '@vicons/ionicons5'
</script>
Common Patterns
Full Page 404
<template>
<div class="error-page">
<n-result status="404" title="404" description="Page not found">
<template #footer>
<n-space>
<n-button @click="goBack">Go Back</n-button>
<n-button type="primary" @click="goHome">Go Home</n-button>
</n-space>
</template>
</n-result>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => router.back()
const goHome = () => router.push('/')
</script>
<style scoped>
.error-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
</style>
Payment Result
<template>
<n-card>
<n-result
:status="paymentSuccess ? 'success' : 'error'"
:title="paymentSuccess ? 'Payment Successful' : 'Payment Failed'"
:description="paymentSuccess ? 'Your order has been confirmed' : 'Please try again'"
>
<template #footer>
<n-space>
<n-button v-if="paymentSuccess" type="primary" @click="viewOrder">
View Order
</n-button>
<n-button v-else type="primary" @click="retryPayment">
Retry Payment
</n-button>
</n-space>
</template>
</n-result>
</n-card>
</template>
<script setup>
import { ref } from 'vue'
const paymentSuccess = ref(true)
const viewOrder = () => console.log('View order')
const retryPayment = () => console.log('Retry payment')
</script>
Form Submission Result
<template>
<div>
<n-form v-if="!submitted" ref="formRef" :model="formData">
<n-form-item label="Email" path="email">
<n-input v-model:value="formData.email" />
</n-form-item>
<n-button type="primary" @click="handleSubmit">Submit</n-button>
</n-form>
<n-result
v-else
:status="submitSuccess ? 'success' : 'error'"
:title="submitSuccess ? 'Submitted' : 'Failed'"
:description="submitSuccess ? 'We will contact you soon' : 'Please try again later'"
>
<template #footer>
<n-button @click="reset">Submit Another</n-button>
</template>
</n-result>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const submitted = ref(false)
const submitSuccess = ref(true)
const formData = reactive({ email: '' })
const handleSubmit = () => {
submitted.value = true
}
const reset = () => {
submitted.value = false
formData.email = ''
}
</script>
Custom Illustration
<template>
<n-result title="Welcome" description="Let's get started">
<template #icon>
<img src="/welcome-illustration.svg" alt="Welcome" style="width: 200px;" />
</template>
<template #default>
<div style="text-align: center; padding: 20px;">
<p>Follow the steps below to complete your setup</p>
<n-steps :current="1" size="small">
<n-step title="Profile" />
<n-step title="Preferences" />
<n-step title="Complete" />
</n-steps>
</div>
</template>
<template #footer>
<n-button type="primary">Get Started</n-button>
</template>
</n-result>
</template>
Maintenance Page
<template>
<div class="maintenance-page">
<n-result status="418" title="Under Maintenance" description="We'll be back soon">
<template #icon>
<n-icon size="100">
<ConstructOutline />
</n-icon>
</template>
<template #footer>
<n-space vertical>
<n-text depth="3">Estimated time: 30 minutes</n-text>
<n-button @click="checkStatus">Check Status</n-button>
</n-space>
</template>
</n-result>
</div>
</template>
<script setup>
import { ConstructOutline } from '@vicons/ionicons5'
const checkStatus = () => {
console.log('Checking status...')
}
</script>
Best Practices
Use appropriate status: Match the status to the actual situation
<n-result status="404" title="Not Found" />Provide actionable buttons: Add footer buttons for user actions
<n-result status="error" title="Error"> <template #footer> <n-button type="primary" @click="retry">Retry</n-button> </template> </n-result>Clear descriptions: Write helpful descriptions
<n-result description="The page you're looking for doesn't exist or has been moved" />Match size to context: Use appropriate size for the page layout
<n-result size="small" /> <!-- In cards or modals --> <n-result size="huge" /> <!-- Full page results -->Custom icons for branding: Use custom icons for brand consistency
<n-result> <template #icon> <CompanyLogo /> </template> </n-result>Center on page: Center result components for better visual impact
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <n-result status="404" /> </div>