Badge

A versatile badge component for displaying status, categories, counts, and other contextual information with various styles and sizes.

Default Badge

<c-badge>Default Badge</c-badge>

Component API

Property	Type	Default	Description
`variant`	`string`	`neutral`	Badge color variant: primary, secondary, accent, success, warning, error, info, neutral, ghost
`size`	`string`	`md`	Badge size: xs, sm, md, lg
`outline`	`string`	`false`	Use outline style instead of solid (use "true")
`icon_left`	`string`	`-`	Icon name to display on the left side
`icon_right`	`string`	`-`	Icon name to display on the right side
`class`	`string`	`-`	Additional CSS classes

Examples

Badge Variants

The badge component supports multiple color variants for different contexts and meanings.

Primary Secondary Accent Success Warning Error Info Neutral Ghost

<c-badge variant="primary">Primary</c-badge>
<c-badge variant="secondary">Secondary</c-badge>
<c-badge variant="success">Success</c-badge>
<c-badge variant="warning">Warning</c-badge>
<c-badge variant="error">Error</c-badge>

Badge Sizes

Different sizes are available to match your design needs and hierarchy.

Extra Small Small Medium Large

<c-badge variant="primary" size="xs">Extra Small</c-badge>
<c-badge variant="primary" size="sm">Small</c-badge>
<c-badge variant="primary" size="md">Medium</c-badge>
<c-badge variant="primary" size="lg">Large</c-badge>

Outline Style

Use the outline="true" prop for a bordered style instead of solid background.

Primary Secondary Success Warning Error

<c-badge variant="primary" outline="true">Primary</c-badge>
<c-badge variant="secondary" outline="true">Secondary</c-badge>
<c-badge variant="success" outline="true">Success</c-badge>

Badges with Icons

Add icons to your badges using icon_left and icon_right props.

Completed Pending Failed Next Featured

<c-badge variant="success" icon_left="check">Completed</c-badge>
<c-badge variant="warning" icon_left="clock">Pending</c-badge>
<c-badge variant="error" icon_left="x">Failed</c-badge>
<c-badge variant="info" icon_right="arrow-right">Next</c-badge>

Status Indicators

Common usage patterns for status indication in applications.

User Status: Active

Order Status: Processing

Priority: High

Category: Technology

<c-badge variant="success" size="sm" icon_left="check">Active</c-badge>
<c-badge variant="warning" size="sm" icon_left="clock">Processing</c-badge>
<c-badge variant="error" size="sm" icon_left="alert-triangle">High</c-badge>

Count and Notification Badges

Perfect for displaying counts, notifications, and numeric indicators.

Messages 12

Notifications 3

Cart Items 5

New •

<c-badge variant="primary" size="sm">12</c-badge>
<c-badge variant="error" size="xs">3</c-badge>
<c-badge variant="accent" size="sm">5</c-badge>
<c-badge variant="success" size="xs">•</c-badge>

Usage Guidelines

Color Meaning

Use colors consistently: success for positive states, warning for caution, error for problems, info for neutral information.

Accessibility

Don't rely solely on color to convey meaning. Use icons and clear text for better accessibility.

Keep Content Short

Badges work best with short, concise text. For longer content, consider using other components like chips or tags.

Tungsten UI 💡