Result
Display the result of an operation or page state with status icons and actions.
Preview
Success result with action buttons
Task Completed!
Your task has been marked as complete and moved to the Done column.
Status Variants
Different status types for various scenarios
Payment Successful
Your payment has been processed.
Operation Failed
Something went wrong. Please try again.
Session Expiring
Your session will expire in 5 minutes.
Verification Required
Check your email for a verification link.
HTTP Status Codes
Pre-configured results for common HTTP errors
Page Not Found
The page you're looking for doesn't exist.
Access Denied
You don't have permission to access this resource.
Server Error
Something went wrong on our end.
Convenience Components
Pre-configured result components
SuccessResult
Saved!
Your changes have been saved
NotFoundResult
Page Not Found
The page you're looking for doesn't exist or has been moved
Props
Result component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
status* | 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500' | — | Result status type |
title* | string | — | Main title text |
subtitle | string | — | Optional description text |
icon | ReactNode | — | Custom icon element (overrides default) |
primaryAction | ReactNode | — | Primary action button |
secondaryAction | ReactNode | — | Secondary action button |
extra | ReactNode | — | Additional content below actions |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { Result, SuccessResult, NotFoundResult } from '@/blocks/data-display/result'
import { Button } from '@/components/ui/button'
// Success result with actions
<Result
status="success"
title="Task Completed!"
subtitle="Your task has been marked as done"
primaryAction={<Button>View Task</Button>}
secondaryAction={<Button variant="inverse">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" />}
/>Features
Built-in functionality
- 7 status types: Success, error, warning, info, 404, 403, and 500
- Status-specific icons: Automatic icon and color based on status type
- Custom icons: Override default icons with custom elements
- Action buttons: Primary and secondary action button slots
- Extra content: Additional content area below actions
- Convenience components: SuccessResult, ErrorResult, NotFoundResult shortcuts
- Dark mode: Full dark mode support with adjusted colors
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="status" for result announcementsIcons are decorative with aria-hiddenAction buttons are properly labeledKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to action buttons |
| Enter / Space | Activate buttons |
Notes
- Status icons have appropriate color contrast
- Clear visual hierarchy with title and subtitle
- Focus management for action buttons