Badge

Avatar
Breadcrumb

Badge

BadgeSecondaryDestructiveOutline

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Badge component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/badge.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your badge HTML

Add class="badge" to an inline element. Add data-variant when the badge is not the default primary variant.

Inline SVG icons are spaced automatically by the badge gap.

<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="destructive">Destructive</span>
<span class="badge" data-variant="outline">Outline</span>
<span class="badge" data-variant="ghost">Ghost</span>

Badges support right-to-left layouts through native text flow. Flip directional icons explicitly.

Examples

Variants

Use data-variant to change the badge variant.

DefaultSecondaryDestructiveOutlineGhost

With icon

Use data-icon="inline-start" or data-icon="inline-end" on the icon for icon-aware spacing.

VerifiedBookmark

With spinner

Use an inline loading icon with data-icon="inline-start" or data-icon="inline-end".

DeletingGenerating
Open Link

Custom colors

BlueGreenSkyPurpleRed

RTL

شارةثانويمدمرمخططمتحققإشارة مرجعية