Badge

Displays a badge or a component that looks like a badge.

Badge
Component Code
<april:badge>Badge</april:badge>

Variant examples

The badge component comes in multiple variants

Default

Badge
Component Code
<april:badge>Badge</april:badge>

Secondary

Secondary
Component Code
<april:badge variant="secondary">Secondary</april:badge>

Outline

Outline
Component Code
<april:badge variant="outline">Outline</april:badge>

Destructive

Destructive
Component Code
<april:badge variant="destructive">Destructive</april:badge>