mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
dmytro
175 lines
4.6 KiB
Plaintext
175 lines
4.6 KiB
Plaintext
---
|
|
title: "Badge"
|
|
description: "Use badges to highlight status, labels, or metadata inline or standalone."
|
|
keywords: ["badge", "label", "tag", "status", "indicator"]
|
|
---
|
|
|
|
import IconsOptional from "/snippets/icons-optional.mdx";
|
|
|
|
Use badges to display status indicators, labels, or metadata. Badges can be used inline within text or as standalone elements.
|
|
|
|
## Basic badge
|
|
|
|
<Badge>Badge</Badge>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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>
|
|
|
|
```mdx
|
|
<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 <Badge color="orange" size="sm">Premium</Badge> subscription, or this API endpoint returns <Badge color="green" size="sm">JSON</Badge> format.
|
|
|
|
```mdx
|
|
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>
|
|
|
|
```mdx
|
|
<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
|
|
|
|
<ResponseField name="color" type="string" default="gray">
|
|
Badge color variant.
|
|
|
|
Options: `gray`, `blue`, `green`, `yellow`, `orange`, `red`,
|
|
`purple`, `white`, `surface`, `white-destructive`, `surface-destructive`.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="size" type="string" default="md">
|
|
Badge size.
|
|
|
|
Options: `xs`, `sm`, `md`, `lg`.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="shape" type="string" default="rounded">
|
|
Badge shape.
|
|
|
|
Options: `rounded`, `pill`.
|
|
</ResponseField>
|
|
|
|
<IconsOptional />
|
|
|
|
<ResponseField name="stroke" type="boolean" default="false">
|
|
Display badge with an outline instead of filled background.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="disabled" type="boolean" default="false">
|
|
Display badge in a disabled state with reduced opacity.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Additional CSS classes to apply to the badge.
|
|
</ResponseField>
|