Badge

A small label for status, category, or count. Supports 3 variants × 5 colors × 2 sizes.

Import

tsx

import { Badge } from 'fxui-core';

Usage

tsx

<Badge>New</Badge>

Variants

tsx

<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="neon">Neon</Badge>

Colors

tsx

<Badge color="default">Default</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="error">Error</Badge>
<Badge color="info">Info</Badge>

Combining Variant and Color

tsx

<Badge variant="neon" color="success">Shipped</Badge>
<Badge variant="outline" color="error">Failed</Badge>
<Badge variant="default" color="warning">Pending</Badge>

Sizes

tsx

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

API Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'outline' \| 'neon' | 'default' | Visual style | | color | 'default' \| 'success' \| 'warning' \| 'error' \| 'info' | 'default' | Color scheme | | size | 'sm' \| 'md' | 'md' | Badge size | | className | string | — | Additional Tailwind classes |

Extends all native <span> HTML attributes.