Status

The Status component provides a clean and intuitive way to display different states or conditions. It supports multiple variants, custom styling, and optional labels to provide context.

Import

import { Status } from 'h2o-library';

Basic Usage

Basic Status Indicators

<div className="flex gap-4">
  <Status variant="active" />
  <Status variant="muted" />
  <Status variant="destructive" />
</div>

Status with Labels

<div className="flex gap-4">
  <Status variant="active" label="Active" />
  <Status variant="muted" label="Muted" />
  <Status variant="destructive" label="Destructive" />
</div>

Custom Styled Status

<div className="flex gap-4">
  <Status
    variant="active"
    label="Custom Active"
    className="bg-green-100 text-green-800"
  />
  <Status
    variant="muted"
    label="Custom Muted"
    className="bg-gray-100 text-gray-800"
  />
  <Status
    variant="destructive"
    label="Custom Destructive"
    className="bg-red-100 text-red-800"
  />
</div>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
variant	"active" | "muted" | "destructive"	-	Visual style variant
label	string	-	Optional label text
className	string	-	Additional CSS classes

Design Considerations

• Clear visual hierarchy
• Consistent spacing and alignment
• Proper contrast for different states
• Support for labels
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Icon and text alignment
• Support for different contexts

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Label associations
• State announcements
• Error handling
• Focus management
• Color contrast
• Text alternatives