@litforge/badge

A badge component for displaying status indicators with color variants, built with Lit.

Overview

The Badge component provides a simple way to display status indicators, labels, or tags with different color variants and sizes.

Installation

npm install @litforge/badge
# or
pnpm add @litforge/badge
# or
yarn add @litforge/badge

Basic Usage

<script type="module">
  import '@litforge/badge';
</script>

<lf-badge label="Active" variant="success"></lf-badge>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | '' | Badge label text | | variant | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'primary' | Badge color variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Badge size |

Examples

Variants

<lf-badge label="Primary" variant="primary"></lf-badge>
<lf-badge label="Success" variant="success"></lf-badge>
<lf-badge label="Warning" variant="warning"></lf-badge>
<lf-badge label="Danger" variant="danger"></lf-badge>
<lf-badge label="Info" variant="info"></lf-badge>

Sizes

<lf-badge label="Small" size="sm"></lf-badge>
<lf-badge label="Medium" size="md"></lf-badge>
<lf-badge label="Large" size="lg"></lf-badge>

With Slot

<lf-badge variant="success">
  <span>Custom Content</span>
</lf-badge>

Styling

The component uses CSS variables for theming:

lf-badge {
  --lf-badge-radius: 12px;
  --lf-badge-padding-y: 4px;
  --lf-badge-padding-x: 8px;
  --lf-badge-font-size: 0.75rem;
  --lf-badge-primary-bg: #0b6efd;
  --lf-badge-primary-color: #ffffff;
  /* ... more variables */
}

TypeScript

import { Badge, BadgeVariant, BadgeSize } from '@litforge/badge';

License

Part of the LitForge component library.