mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
skeptrune
9200586a3a
* docs: boost search ranking for single-word title pages Apply `boost: 3` to English pages whose H1 / frontmatter title is a single word (e.g. "Assistant", "Quickstart", "Cards"). Short titles tend to be canonical landing pages for a topic, so users searching the exact term should land on them first. * docs: drop boost on websocket-playground stub to keep canonical Playground ranking `api-playground/websocket-playground.mdx` is an auto-generated AsyncAPI stub with no body content but shares the title "Playground" with `api-playground/overview.mdx`. Boosting both equally diluted the canonical overview page in search for the query "playground". Drop the boost on the stub.
176 lines
4.7 KiB
Plaintext
176 lines
4.7 KiB
Plaintext
---
|
|
title: "Badge"
|
|
description: "Use the badge component to highlight status indicators, version labels, or metadata inline with customizable colors and hover tooltips."
|
|
keywords: ["badge", "label", "tag", "status", "indicator"]
|
|
boost: 3
|
|
---
|
|
|
|
import IconsOptional from "/snippets/icons-optional.mdx";
|
|
|
|
Use badges to display status indicators, labels, or metadata. Place badges 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>
|