Badge - Mintlify

Documentation Index

Fetch the complete documentation index at: /docs/llms.txt

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

Use badges to display status indicators, labels, or metadata. Place badges inline within text or as standalone elements.

Basic badge

Badge

<Badge>Badge</Badge>

Colors

Badges support multiple color variants to convey different meanings.

<Badge color="gray">Badge</Badge>
<Badge color="blue">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="orange">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="purple">Badge</Badge>
<Badge color="white">Badge</Badge>
<Badge color="surface">Badge</Badge>
<Badge color="white-destructive">Badge</Badge>
<Badge color="surface-destructive">Badge</Badge>

Sizes

Badges come in four sizes to match your content hierarchy.

<Badge size="xs">Badge</Badge>
<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>

Shapes

Choose between rounded corners or pill-shaped badges.

<Badge shape="rounded">Badge</Badge>
<Badge shape="pill">Badge</Badge>

Icons

Add icons to badges for additional context.

<Badge icon="circle-check" color="green">Badge</Badge>
<Badge icon="clock" color="orange">Badge</Badge>
<Badge icon="ban" color="red">Badge</Badge>

Stroke variant

Use the stroke variant for a more subtle appearance.

<Badge stroke color="blue">Badge</Badge>
<Badge stroke color="green">Badge</Badge>
<Badge stroke color="orange">Badge</Badge>
<Badge stroke color="red">Badge</Badge>

Disabled state

Disable badges to indicate inactive or unavailable states.

<Badge disabled icon="lock" color="gray">Badge</Badge>
<Badge disabled icon="lock" color="blue">Badge</Badge>

Inline usage

Badges work naturally within text content. For example, this feature requires a Premium subscription, or this API endpoint returns JSON format.

This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.

Combined properties

Combine multiple properties for custom badge styles.

<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Verified</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Beta</Badge>

Properties

color
Type: string
Default: "gray"
Badge color variant. Options: gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.

size
Type: string
Default: "md"
Badge size. Options: xs, sm, md, lg.

shape
Type: string
Default: "rounded"
Badge shape. Options: rounded, pill.

icon
Type: string
The icon to display. Options:

• Font Awesome icon name,
• Lucide icon name,
• Tabler icon name,
• A single emoji (for example, 💡 or 🚀),
• URL to an externally hosted icon,
• Path to an icon file in your project,
• SVG code wrapped in curly braces.

iconType
Type: string
The Font Awesome icon style. Options: regular, solid, light, thin, sharp-solid, duotone, brands.

stroke
Type: boolean
Default: "false"
Display badge with an outline instead of filled background.

disabled
Type: boolean
Default: "false"
Display badge in a disabled state with reduced opacity.

className
Type: string
Additional CSS classes to apply to the badge.