Tuimorphic

Badge

Status indicators and labels with variant-based styling.

Import

import { Badge } from 'tuimorphic';

Usage

The Badge component displays status indicators and labels with terminal aesthetics.

Default
<Badge>Default</Badge>

Props

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'error' | 'info''default'Visual variant
childrenReact.ReactNode-Badge content
classNamestring-Additional CSS class names

Variants

Status Variants

DefaultSuccessWarningErrorInfo
<Badge variant="default">Default</Badge>
<Badge variant="success">Online</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Offline</Badge>
<Badge variant="info">New</Badge>

Common Use Cases

// Status indicators
<Badge variant="success">Active</Badge>
<Badge variant="error">Inactive</Badge>
 
// Labels
<Badge variant="info">Beta</Badge>
<Badge variant="warning">Deprecated</Badge>
 
// Counts
<Badge variant="default">42</Badge>

Previous

Message

Next

Progress

On this page