Source

Command Palette

Search for a command to run...

Badge

Displays status, tags, or metadata with optional interactions and dismissibility.

About Badge

Small label component for categorizing content or displaying status information. Supports clickable badges, dismissible badges with an X button, dot variants for compact indicators, and icon placement for visual emphasis.

Installation

Import the Badge component from LSD:
import { Badge } from '@nipsys/lsd'

export default function MyComponent() {
  return <Badge />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Destructive

Dots

Filled

Info

Outlined

Success

Warning

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Dismissible

Features

Interactive

API Reference

Badge

asChild
Render the child as the root element. Merges props with the first child element for custom rendering.
Type: boolean
onDismiss
Callback when dismiss button is clicked. Displays an X icon that triggers this callback when clicked.
Type: () => void
onClick
Callback when badge is clicked. Makes the badge interactive and adds button role behavior.
Type: () => void
icon
Icon to display alongside badge text. Renders the icon positioned left or right based on iconPosition.
Type: React.ReactNode
iconPosition
Position of the icon relative to badge text. Controls whether icon appears before or after the text content.
Type: "left" | "right"
dot
Display as a dot without text. Renders a circular dot indicator instead of a text badge.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to clickable badges• Enter or Space - Activate clickable badge (when role="button")
ARIA Attributes
Proper ARIA attributes for screen readers
• role="button" when onClick is provided• aria-label="Dismiss" on dismiss button• Badge text should be descriptive of the status or category
Focus States
Visible focus indicators for keyboard users
• Clickable badges are focusable (tabIndex=0)• Focus ring indicates keyboard focus on clickable badges
Table