Badge

Badges are small labels used to display status, counts, or categories.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Badge } from '@libretexts/davis-react';

export default function Example() {
  return <Badge>New</Badge>;
}

Variants

<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>

When to use

• Badge — Use to convey a status, count, or categorical attribute alongside an element (e.g., "Active", "3 pending", "Beta"). Badges are non-interactive labels.
• Tag / removable Badge — Use the removable Badge variant when users need to add or remove labels (e.g., filter chips, tag selectors).