Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Badge component displays small, pill-shaped labels with semantic color variants. Useful for tags, status indicators, and metadata labels.

​
Import

import { Badge } from "@aurelienbbn/gadget-ui/components";

​
Basic Usage

<Badge>Default</Badge>

​
Variants

The Badge component supports five color variants: 
<Badge variant="default">
  Default
</Badge>
Neutral gray variant for general-purpose labels. This is the default variant.

​
Sizes

Two size options are available: 
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
  • sm - Padding: 8px/2px (2/0.5), Font: 10px, Tight leading
  • md - Padding: 10px/2px (2.5/0.5), Font: 12px (xs) - Default

​
Props

​
variant
'default' | 'accent' | 'success' | 'destructive' | 'warning'
default:"default"
The color variant of the badge.
​
size
'sm' | 'md'
default:"md"
The size of the badge.
​
className
string
Additional CSS classes to apply.
The Badge component extends HTMLAttributes<HTMLSpanElement>, so all standard span attributes are supported.

​
Design Details

  • Rounded-full shape (pill-shaped)
  • Border with matching color variant
  • Smooth color transitions
  • Font: sans-serif family, medium weight
  • Inline-flex layout for proper alignment

​
Examples

​
Status Indicators

<div className="flex gap-2">
  <Badge variant="success">Active</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="destructive">Failed</Badge>
</div>

​
With Icons

<Badge variant="accent">
  <span aria-hidden="true">★</span>
  Featured
</Badge>

​
Small Size for Compact UI

<Badge size="sm" variant="default">v2.0</Badge>

​
Component Definition

Location: packages/gadget-ui/src/components/badge.tsx:28 The Badge is a simple functional component that renders a <span> element.

Build docs developers (and LLMs) love

Get started for freeTalk to us