Badge

Badges are used to denote status or to highlight specific information.

Usage

You can create a new Badge with any text content you'd like to highlight.

Badge 
<span class="drac-badge drac-bg-purple"
  ><span class="drac-text drac-line-height drac-text-black">Badge</span></span
>
<Badge>Badge</Badge>;

Colors

Badges can be customized to use any of the Dracula UI theme colors, including all solid, gradient, and animated colors.

Fun Badge 
<span class="drac-badge drac-bg-animated"
  ><span class="drac-text drac-line-height drac-text-black"
    >Fun Badge</span
  ></span
>
<Badge color="animated">Fun Badge</Badge>;

Variants

Use `outline` or `subtle` when you don't want your Badges to stand out, but still want to keep them playful.

OutlineSubtle 
<div>
  <span
    class="drac-badge drac-bg-orange drac-badge-outline drac-text-orange drac-m-sm"
    ><span class="drac-text drac-line-height drac-text-orange"
      >Outline</span
    ></span
  ><span
    class="drac-badge drac-bg-cyan-transparent drac-badge-subtle drac-text-cyan drac-m-sm"
    ><span class="drac-text drac-line-height drac-text-cyan">Subtle</span></span
  >
</div>
<div>
  <Badge m="sm" color="orange" variant="outline">
    Outline
  </Badge>
  <Badge m="sm" color="cyan" variant="subtle">
    Subtle
  </Badge>
</div>;

Properties

color

The theme variation color for a badge.

"animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
variant

The variants for the Badge components. `normal` -> Default solid badge. `subtle` -> Subtler background, highlights the text. `outline` -> No background color, just borders and text.

"normal" | "subtle" | "outline"