Kern GitHub

Badge

Sharp status label with a small semantic intent set.
Badge intentionally ships only `primary`, `secondary`, and `muted`. `destructive` is reserved for destructive actions, not labels; `success` is reserved for positive confirmation, not status labels (see DESIGN.md Color Usage Rules). Badge also stays sharp while Button is pill-shaped: per DESIGN.md, pill = action, sharp = label.

Intents

Primary Secondary Muted 
1{{ partial:components/primitives/badge label="Primary" /}}

2{{ partial:components/primitives/badge label="Secondary" intent="secondary" /}}

3{{ partial:components/primitives/badge label="Muted" intent="muted" /}}

Slot content

New Draft 
1{{ partial:components/primitives/badge intent="secondary" }}

2    New

3{{ /partial:components/primitives/badge }}

4{{ partial:components/primitives/badge intent="muted" }}

5    Draft

6{{ /partial:components/primitives/badge }}

Custom class

Uppercase 
1{{ partial:components/primitives/badge label="Uppercase" class="uppercase tracking-wide" /}}

Props

Name Type Default Description
intent string primary Visual intent: primary|secondary|muted
label string Badge text (falls back to default slot)
class string Additional classes merged via tw_merge (root element only)

Slots

No slots detected.

Source

 1{{#

 2    @name Badge

 3    @desc Sharp status label with a small semantic intent set.

 4    @param intent string [primary] - Visual intent: primary|secondary|muted

 5    @param label string - Badge text (falls back to default slot)

 6    @param class string - Additional classes merged via tw_merge (root element only)

 7#}}

 8{{# format-ignore-start #}}

 9{{ _intent_key = intent ?? 'primary' }}

10

11{{ _intents = [

12    'primary' => 'bg-primary text-primary-foreground',

13    'secondary' => 'bg-secondary text-secondary-foreground',

14    'muted' => 'bg-muted text-muted-foreground',

15] }}

16

17{{ _class_intent = _intents[_intent_key] ?? _intents['primary'] }}

18{{# format-ignore-end #}}

19<span class="{{ 'inline-flex items-center px-2.5 py-0.5 text-xs font-medium {_class_intent} {class}' | tw_merge }}">

20    {{ label ?? slot }}

21</span>

Dependencies

Packages

1composer require marcorieser/tailwind-merge-statamic