Badges

Badges are compact elements for labeling, highlighting status, or displaying notifications. They support various sizes, colors, and optional icons to enhance visual communication.

Basic Usage

Badges come in three sizes and multiple colors to match your design system. The default badge uses a neutral color scheme.

Basic Badge Sizes

100%

Small

Medium

Large

<div class="flex items-center gap-4">
    <byte-badge size="small">Small</byte-badge>
    <byte-badge>Medium</byte-badge>
    <byte-badge size="large">Large</byte-badge>
  </div>

Colors

Choose from a wide range of colors to convey different meanings or match your brand palette. Each color comes with optimized contrast for both light and dark modes.

Badge Colors

100%

Zinc

Red

Green

Blue

Yellow

Purple

Rose

<div class="flex flex-wrap gap-2">
      <byte-badge color="zinc">Zinc</byte-badge>
      <byte-badge color="red">Red</byte-badge>
      <byte-badge color="green">Green</byte-badge>
      <byte-badge color="blue">Blue</byte-badge>
      <byte-badge color="yellow">Yellow</byte-badge>
      <byte-badge color="purple">Purple</byte-badge>
      <byte-badge color="rose">Rose</byte-badge>
  </div>

Icons

Add icons to badges to enhance their meaning or provide visual cues. Icons automatically adjust their size based on the badge size.

Badges with Icons

100%

Completed

Pending

Failed

Notification

<div class="flex flex-wrap gap-2">
    <byte-badge icon="check-circle" color="green">Completed</byte-badge>
    <byte-badge icon="clock" color="yellow">Pending</byte-badge>
    <byte-badge icon="x-circle" color="red">Failed</byte-badge>
    <byte-badge icon="bell" color="blue">Notification</byte-badge>
  </div>

Common Use Cases

Here are some typical scenarios where badges are commonly used:

Badge Use Cases

100%

Online

Status indicators

99+

Notification counters

Premium

Feature labels

<div class="space-y-4">
    <!-- Status Indicators -->
    <div class="flex items-center gap-2">
      <byte-badge icon="circle" color="green" size="small">Online</byte-badge>
      <span class="text-sm text-zinc-600 dark:text-zinc-400">Status indicators</span>
    </div>

    <!-- Counters -->
    <div class="flex items-center gap-2">
      <byte-badge color="red" size="small">99+</byte-badge>
      <span class="text-sm text-zinc-600 dark:text-zinc-400">Notification counters</span>
    </div>

    <!-- Labels -->
    <div class="flex items-center gap-2">
      <byte-badge color="purple">Premium</byte-badge>
      <span class="text-sm text-zinc-600 dark:text-zinc-400">Feature labels</span>
    </div>
  </div>

API Reference

Properties

Property

Type

Default

Description

size

string

'medium'

Badge size: 'small', 'medium', 'large'

color

string

'zinc'

Badge color theme

icon

string

Name of the icon to display

Available Colors

zinc

zinc

red

red

orange

orange

amber

amber

yellow

yellow

lime

lime

green

green

emerald

emerald

teal

teal

cyan

cyan

sky

sky

blue

blue

indigo

indigo

violet

violet

purple

purple

fuchsia

fuchsia

pink

pink

rose

rose

Size Comparison

Size

Example

Use Case

small

Small

Compact spaces, lists

medium

Medium

General use, default size

large

Large

Best Practices

Use consistent sizes within the same context
Choose colors that have semantic meaning in your application
Keep badge text concise and clear
Use icons sparingly and only when they add value
Consider color contrast for accessibility

Pro tip: Combine badges with other components like buttons or cards to create more complex UI patterns.