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
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
<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
<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
{/* 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
<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
<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
<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
<Row gap="sm">
<Badge text="Active" variant="success" />
<Badge text="Pending" variant="warning" />
<Badge text="Inactive" variant="default" />
<Badge text="Failed" variant="error" />
</Row>
<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
<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
<Row gap="sm" align="center">
<Icon name="bell" size="lg" />
<Badge text="5" variant="error" size="sm" />
</Row>
Priority Labels
<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>
