On this page
Status
Status component is used to indicate the status of a process or state. It displays a colored indicator dot with an optional label.
import { Status } from "@ninna-ui/feedback";pnpm add @ninna-ui/feedback@latest@ninna-ui/core. CSS setup required.View source Usage
Import and use the Status component to display status indicators.
import { Status } from "@ninna-ui/feedback";
export default function Example() { return ( <Status value="success">Completed</Status> );}Basic
Status indicators without labels.
With Label
Status indicators with descriptive labels.
Sizes
Different size variants for status indicators.
Status Values
Different status values and their semantic meanings.
Indicates successful completion
Indicates failure or error state
Indicates caution or pending state
Indicates informational state
Use Cases
Real-world examples of Status component usage.
Server Status
API Server
Database
Cache Server
Email Service
Task Status
Design Review
Code Review
Testing
Deployment
User Status
John Doe
Jane Smith
Bob Wilson
Build Status
Build #1234 passed
Build #1233 failed
Build #1235 running
API Reference
Complete list of props for the Status component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | 'success' | 'danger' | 'warning' | 'info' | 'info' | Status value that determines the indicator color |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the status indicator and label |
children | React.ReactNode | — | Optional label text to display next to the indicator |
className | string | — | Additional CSS classes |
Accessibility
- Uses
role="status"for proper semantics - Provides
aria-labelwhen no visible label is present - Status colors meet WCAG contrast requirements
- The colored dot is marked as
aria-hidden="true"since the label conveys the meaning