export declare const badgesMdxTemplate = "---\ntitle: \"Badges\"\ndescription: \"Highlight statuses, version labels, and metadata inline with colored badges.\"\ndate: \"2026-07-27\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 12\n---\n# Badges\n\nHighlight statuses, version labels, and metadata with small colored badges - inline within text or standing on their own.\n\n## Basic badge\n\nYou can use the Badge component directly within your MDX files without any import:\n\n```html\nBadge\n```\n\nBadge\n\n## Colors\n\nThe `color` property selects one of eleven variants to convey different meanings:\n\n```html\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\n```\n\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\n\nThe `white` and `white-destructive` badges stay literally white in both light and dark mode, which keeps them legible on top of images, colored frames, and hero areas. Their `surface` counterparts follow the active theme instead - white on light pages, dark on dark ones - so reach for those when the badge sits in regular page content.\n\n## Sizes\n\nFour sizes match different content hierarchies:\n\n```html\nBadge\nBadge\nBadge\nBadge\n```\n\nBadge\nBadge\nBadge\nBadge\n\n## Shapes\n\nChoose between rounded corners and a pill shape:\n\n```html\nBadge\nBadge\n```\n\nBadge\nBadge\n\n## Icons\n\nAdd a [Lucide](https://lucide.dev/icons) icon (kebab-case name) for extra context. Unknown names render nothing, so a typo never breaks the page:\n\n```html\nPassing\nPending\nBlocked\n```\n\nPassing\nPending\nBlocked\n\n## Stroke variant\n\nSet `stroke` for an outline instead of a filled background:\n\n```html\nBadge\nBadge\nBadge\nBadge\n```\n\nBadge\nBadge\nBadge\nBadge\n\n## Solid variant\n\nSet `solid` for a strong filled background with contrasting text:\n\n```html\nBadge\nBadge\nBadge\nBadge\n```\n\nBadge\nBadge\nBadge\nBadge\n\n## Semantic colors\n\nThe `info`, `success`, `warning`, and `error` colors come from your theme rather than the fixed palette, so they follow your `theme.json` and the light/dark toggle. They support the same `stroke` and `solid` variations:\n\n```html\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\n```\n\nBadge\nBadge\nBadge\nBadge\nBadge\nBadge\n\n## HTTP method badges\n\nSet `mono` for a monospace, uppercase label. Combining `mono`, `solid`, and the semantic colors gives the method chips Doccupine itself uses in the sidebar navigation and the API playground:\n\n```html\nGET\nPOST\nPUT\nDELETE\n```\n\nGET\nPOST\nPUT\nDELETE\n\n## Disabled state\n\nSet `disabled` to indicate inactive or unavailable states with reduced opacity:\n\n```html\nBadge\nBadge\n```\n\nBadge\nBadge\n\n## Inline usage\n\nBadges flow naturally with the surrounding text. For example, this feature requires a Premium subscription, and this endpoint returns JSON.\n\n```html\nThis feature requires a Premium subscription.\n```\n\n## Combined properties\n\nAll properties compose freely:\n\n```html\nPro\nVerified\nBeta\n```\n\nPro\nVerified\nBeta\n\n## Properties\n\n\n Badge color variant. Defaults to `gray`. Options: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`, plus the theme-driven `info`, `success`, `warning`, and `error`.\n\n\n\n Badge size. Defaults to `md`. Options: `xs`, `sm`, `md`, `lg`.\n\n\n\n Badge shape. Defaults to `rounded`. Options: `rounded`, `pill`.\n\n\n\n A [Lucide](https://lucide.dev/icons) icon name in kebab-case, displayed before the badge text.\n\n\n\n Display the badge with an outline instead of a filled background. Defaults to `false`.\n\n\n\n Display the badge with a strong filled background and contrasting text. Takes precedence over `stroke`. Defaults to `false`.\n\n\n\n Render the label in monospace uppercase, for code-like labels such as HTTP methods. Defaults to `false`.\n\n\n\n Display the badge in a disabled state with reduced opacity. Defaults to `false`.\n\n\n\n Additional CSS classes to apply to the badge.\n\n\n\n The badge label.\n";