Badge

Overview

Badges are compact visual indicators used to display status, categories, counts, and metadata. MiniKit provides several badge variants for communicating information while maintaining a consistent visual language across your application.

Basic Usage

Create a badge using the data-badge attribute.

<span data-badge>Badge</span>

Variants

Badges support multiple variants for different semantic meanings.

<div class="hstack">
  <span data-badge>Default</span>
  <span data-badge data-variant="secondary">Secondary</span>
  <span data-badge data-variant="success">Success</span>
  <span data-badge data-variant="warning">Warning</span>
  <span data-badge data-variant="danger">Danger</span>
</div>

Outline

Use the outline class for a less prominent appearance.

<div class="hstack">
  <span data-badge data-style="outline">Default</span>
  <span data-badge data-style="outline" data-variant="secondary">Secondary</span>
  <span data-badge data-style="outline" data-variant="success">Success</span>
  <span data-badge data-style="outline" data-variant="warning">Warning</span>
  <span data-badge data-style="outline" data-variant="danger">Danger</span>
</div>

Sizes

Badges support small and large size modifiers.

<div class="hstack">
  <span data-badge data-size="sm">Small</span>
  <span data-badge>Default</span>
  <span data-badge data-size="lg">Large</span>
</div>

Accessibility

Badges provide supplemental information and should not be the only method of communicating important status or state changes.

• Do not rely on color alone to convey meaning.
• Use descriptive badge text whenever possible.
• Ensure badges have sufficient color contrast against their background.
• When badges represent dynamic values or notifications, provide accessible context nearby.

API