Result
Display the result of an operation or page state with status icons and actions
Success Result
Confirm successful operations
Payment Successful!
Your order #12345 has been placed and will be shipped within 2-3 business days.
Error Result
Display error states with recovery options
Payment Failed
We couldn't process your payment. Please check your card details and try again.
Warning Result
Alert users to potential issues
Session Expiring Soon
Your session will expire in 5 minutes. Please save your work.
Info Result
Provide informational messages
Verification Required
We've sent a verification email to john@example.com. Please check your inbox.
404 Not Found
Page not found error state
Page Not Found
The page you're looking for doesn't exist or has been moved.
403 Forbidden
Access denied error state
Access Denied
You don't have permission to access this resource. Please contact your administrator.
500 Server Error
Internal server error state
Server Error
Something went wrong on our end. Our team has been notified.
Convenience Components
Pre-configured result components for common use cases
SuccessResult
Saved!
Your changes have been saved
NotFoundResult
Page Not Found
The page you're looking for doesn't exist or has been moved
Features
Built-in functionality
- 7 status types - success, error, warning, info, 404, 403, 500
- Status-specific icons - Automatic icon and color based on status
- Custom icons - Override default icons with custom elements
- Action buttons - Primary and secondary action slots
- Extra content - Additional content below actions
- Convenience components - SuccessResult, ErrorResult, NotFoundResult, etc.
Usage
Basic implementation examples
import { Result, SuccessResult, NotFoundResult } from '@/components/ui/result'
import { Button } from '@/components/ui/button'
// Success result with actions
<Result
status="success"
title="Payment Successful!"
subtitle="Your order has been placed"
primaryAction={<Button>View Order</Button>}
secondaryAction={<Button variant="outline">Continue</Button>}
/>
// Using convenience components
<SuccessResult
title="Saved!"
subtitle="Your changes have been saved"
/>
<NotFoundResult
primaryAction={<Button>Go Home</Button>}
/>
// Custom icon
<Result
status="info"
title="Custom Icon"
icon={<CustomIcon className="w-10 h-10 text-blue-500" />}
/>API Reference
Result component props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500' | - | Result status (required) |
| title | string | - | Main title (required) |
| subtitle | string | - | Optional description |
| icon | ReactNode | - | Custom icon element |
| primaryAction | ReactNode | - | Primary action button |
| secondaryAction | ReactNode | - | Secondary action button |
| extra | ReactNode | - | Additional content |