69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# Badge Component Documentation
|
|
|
|
## Overview
|
|
|
|
The Badge component displays a badge or badge-like visual element. It extends standard span functionality with customizable variants and shapes.
|
|
|
|
## Type Definition
|
|
|
|
```typescript
|
|
interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
|
|
asChild?: boolean;
|
|
variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "accent";
|
|
type?: "default" | "circle" | "dot";
|
|
}
|
|
```
|
|
|
|
## Properties
|
|
|
|
| Property | Type | Default | Purpose |
|
|
|----------|------|---------|---------|
|
|
| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'accent'` | `'default'` | Determines the visual styling |
|
|
| `type` | `'default' \| 'circle' \| 'dot'` | `'default'` | Controls shape and layout presentation |
|
|
| `asChild` | `boolean` | `false` | Enables `Slot` rendering for child element styling |
|
|
| span props | `ComponentProps<'span'>` | — | All native HTML span attributes supported |
|
|
|
|
## Basic Examples
|
|
|
|
Simple badge variants:
|
|
```jsx
|
|
<Badge>Default</Badge>
|
|
<Badge variant="success">Deployed</Badge>
|
|
<Badge type="circle">3</Badge>
|
|
<Badge type="dot" />
|
|
```
|
|
|
|
## Usage Patterns
|
|
|
|
**Variant showcase:**
|
|
```jsx
|
|
<Badge>Badge</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="destructive">Destructive</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">warning</Badge>
|
|
```
|
|
|
|
**Circular badge indicators:**
|
|
```jsx
|
|
<Badge type="circle">3</Badge>
|
|
<Badge variant="secondary" type="circle">3</Badge>
|
|
<Badge variant="destructive" type="circle">3</Badge>
|
|
<Badge variant="success" type="circle">3</Badge>
|
|
<Badge variant="warning" type="circle">3</Badge>
|
|
```
|
|
|
|
**Dot indicators:**
|
|
```jsx
|
|
<Badge type="dot" />
|
|
<Badge variant="secondary" type="dot" />
|
|
<Badge variant="destructive" type="dot" />
|
|
<Badge variant="success" type="dot" />
|
|
<Badge variant="warning" type="dot" />
|
|
```
|
|
|
|
## References
|
|
|
|
- [Radix UI Badge Documentation](https://www.radix-ui.com/primitives/docs/components/badge)
|
|
- [API Reference](https://www.radix-ui.com/primitives/docs/components/badge#api-reference)
|