> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Status indicator or label with custom colors and styling

# Badge

The Badge component displays a small status label, tag, or count. It's commonly used for status indicators, categories, notification counts, or labels.

## Props

| Prop          | Type               | Default      | Description                                                                |
| ------------- | ------------------ | ------------ | -------------------------------------------------------------------------- |
| `text`        | `string`           | **Required** | Text to display inside the badge                                           |
| `variant`     | `string`           | `"default"`  | Color variant: `default`, `primary`, `success`, `warning`, `error`, `info` |
| `size`        | `string`           | `"md"`       | Size: `sm`, `md`, `lg`                                                     |
| `outline`     | `boolean`          | `false`      | Outline style (transparent background with border)                         |
| `icon`        | `string`           | -            | Icon name to display before the text                                       |
| `color`       | `string`           | -            | Custom background color (overrides variant)                                |
| `textColor`   | `string`           | -            | Custom text color                                                          |
| `borderColor` | `string`           | -            | Custom border color (for outline style)                                    |
| `radius`      | `string \| number` | `"full"`     | Border radius: `sm`, `md`, `lg`, `full`, or number                         |

## Variants

* `"default"` - Neutral gray background
* `"primary"` - Brand color background
* `"success"` - Green/success color
* `"warning"` - Yellow/warning color
* `"error"` - Red/error color
* `"info"` - Blue/info color

## Sizes

* `"sm"` - Small (padding: 2/6, font: 11px)
* `"md"` - Medium (padding: 4/8, font: 12px) - default
* `"lg"` - Large (padding: 6/10, font: 14px)

## Examples

### Basic Badges

```jsx theme={null}
<Row gap="sm">
  <Badge text="Default" />
  <Badge text="Primary" variant="primary" />
  <Badge text="Success" variant="success" />
  <Badge text="Warning" variant="warning" />
  <Badge text="Error" variant="error" />
  <Badge text="Info" variant="info" />
</Row>
```

### Outline Style

```jsx theme={null}
<Row gap="sm">
  <Badge text="Default" outline />
  <Badge text="Primary" variant="primary" outline />
  <Badge text="Success" variant="success" outline />
  <Badge text="Warning" variant="warning" outline />
  <Badge text="Error" variant="error" outline />
</Row>
```

### Custom Colors

```jsx theme={null}
{/* Custom solid badge */}
<Badge text="Custom" color="#8B5CF6" textColor="#FFFFFF" />

{/* Custom outline badge */}
<Badge
  text="Purple"
  outline
  color="#8B5CF6"
/>

{/* Multiple custom badges */}
<Row gap="sm">
  <Badge text="Teal" color="#14B8A6" />
  <Badge text="Pink" color="#EC4899" />
  <Badge text="Orange" color="#F97316" />
</Row>
```

### Sizes

```jsx theme={null}
<Row gap="sm" align="center">
  <Badge text="Small" size="sm" variant="primary" />
  <Badge text="Medium" size="md" variant="primary" />
  <Badge text="Large" size="lg" variant="primary" />
</Row>
```

### With Icons

```jsx theme={null}
<Row gap="sm">
  <Badge text="New" icon="sparkles" variant="primary" />
  <Badge text="Verified" icon="check" variant="success" />
  <Badge text="Alert" icon="alert-triangle" variant="warning" />
</Row>
```

### Custom Border Radius

```jsx theme={null}
<Row gap="sm">
  <Badge text="Pill" radius="full" variant="primary" />
  <Badge text="Rounded" radius="lg" variant="primary" />
  <Badge text="Subtle" radius="md" variant="primary" />
  <Badge text="Sharp" radius="sm" variant="primary" />
</Row>
```

## Common Patterns

### Status Indicators

```jsx theme={null}
<Row gap="sm">
  <Badge text="Active" variant="success" />
  <Badge text="Pending" variant="warning" />
  <Badge text="Inactive" variant="default" />
  <Badge text="Failed" variant="error" />
</Row>
```

### Tags/Categories

```jsx theme={null}
<Row gap="sm" wrap>
  <Badge text="React" color="#61DAFB" textColor="#000" />
  <Badge text="TypeScript" color="#3178C6" />
  <Badge text="Node.js" color="#339933" />
  <Badge text="GraphQL" color="#E10098" />
</Row>
```

### Item Card with Badge

```jsx theme={null}
<Card>
  <Row gap="md" align="start">
    <Image src="https://example.com/product.jpg" size="lg" />
    <Col gap="xs" flex={1}>
      <Row justify="space-between" align="center">
        <Title value="Product Name" size="sm" />
        <Badge text="In Stock" variant="success" size="sm" />
      </Row>
      <Text value="Product description goes here" color="muted" />
      <Text value="$99.99" weight="bold" />
    </Col>
  </Row>
</Card>
```

### Notification Count

```jsx theme={null}
<Row gap="sm" align="center">
  <Icon name="bell" size="lg" />
  <Badge text="5" variant="error" size="sm" />
</Row>
```

### Priority Labels

```jsx theme={null}
<Row gap="sm">
  <Badge text="P0 - Critical" variant="error" />
  <Badge text="P1 - High" variant="warning" />
  <Badge text="P2 - Medium" variant="info" />
  <Badge text="P3 - Low" variant="default" />
</Row>
```