Badge

A compact status or metadata label. Six semantic colors, soft-tinted by default or solid for high emphasis, with optional pill shape and status dot.

jlds add badge

Usage

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/badge.css">

<span class="jl-badge jl-badge--neutral">Badge</span>

Vue

<script setup lang="ts">
import { Badge } from "@/components/ui/badge"
</script>

<template>
  <Badge color="neutral">Badge</Badge>
</template>

React

import { Badge } from "@/components/ui/badge"

<Badge color="neutral">Badge</Badge>

Colors

neutral · brand · success · warning · danger · info

HTML

<span class="jl-badge jl-badge--neutral">Neutral</span>
<span class="jl-badge jl-badge--brand">Brand</span>
<span class="jl-badge jl-badge--success">Success</span>
<span class="jl-badge jl-badge--warning">Warning</span>
<span class="jl-badge jl-badge--danger">Danger</span>
<span class="jl-badge jl-badge--info">Info</span>

Vue

<template>
  <Badge color="neutral">Neutral</Badge>
  <Badge color="brand">Brand</Badge>
  <Badge color="success">Success</Badge>
  <Badge color="warning">Warning</Badge>
  <Badge color="danger">Danger</Badge>
  <Badge color="info">Info</Badge>
</template>

React

<Badge color="neutral">Neutral</Badge>
<Badge color="brand">Brand</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="info">Info</Badge>

Solid

Add solid (React/Vue prop) or the jl-badge--solid class (HTML) for a filled, high-emphasis badge.

HTML

<span class="jl-badge jl-badge--solid jl-badge--brand">Brand</span>
<span class="jl-badge jl-badge--solid jl-badge--success">Success</span>
<span class="jl-badge jl-badge--solid jl-badge--danger">Danger</span>

Vue

<template>
  <Badge solid color="brand">Brand</Badge>
  <Badge solid color="success">Success</Badge>
  <Badge solid color="danger">Danger</Badge>
</template>

React

<Badge solid color="brand">Brand</Badge>
<Badge solid color="success">Success</Badge>
<Badge solid color="danger">Danger</Badge>

Pill & dot

Add pill for fully-rounded corners and dot for a leading status dot.

HTML

<span class="jl-badge jl-badge--pill jl-badge--success">
  <span class="jl-badge__dot"></span>
  Online
</span>
<span class="jl-badge jl-badge--pill jl-badge--neutral">Pill</span>

Vue

<template>
  <Badge pill dot color="success">Online</Badge>
  <Badge pill color="neutral">Pill</Badge>
</template>

React

<Badge pill dot color="success">Online</Badge>
<Badge pill color="neutral">Pill</Badge>

Dismissible

Provide onRemove (React) or removable + @remove (Vue) to render a trailing × — parity with Tag, for filter chips and token lists.

HTML

<span class="jl-badge jl-badge--pill jl-badge--brand">
  production
  <button type="button" class="jl-badge__remove" aria-label="Remove">
    <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg>
  </button>
</span>

Vue

<template>
  <Badge v-for="t in tags" :key="t" color="brand" pill removable @remove="drop(t)">{{ t }}</Badge>
</template>

React

{tags.map((t) => (
  <Badge key={t} color="brand" pill onRemove={() => drop(t)}>{t}</Badge>
))}

Props

React

Badge extends React.HTMLAttributes<HTMLSpanElement> (so className, onClick, etc. pass through).

Prop	Type	Default	Description
color	"neutral" | "brand" | "success" | "warning" | "danger" | "info"	"neutral"	Semantic color
solid	boolean	false	Filled instead of tinted
pill	boolean	false	Fully rounded
dot	boolean	false	Show a leading status dot
icon	React.ReactNode	—	Leading icon node
onRemove	(e) => void	—	Renders a trailing × and makes the badge dismissible

Vue

Prop	Type	Default	Description
color	"neutral" | "brand" | "success" | "warning" | "danger" | "info"	"neutral"	Semantic color
solid	boolean	false	Filled instead of tinted
pill	boolean	false	Fully rounded
dot	boolean	false	Show a leading status dot
removable	boolean	false	Render a trailing × that emits remove

Slots: default (label), icon (leading icon). Emits: remove.

CSS classes (HTML)

Class	Purpose
.jl-badge	Base class — always required
.jl-badge--neutral / --brand / --success / --warning / --danger / --info	Color
.jl-badge--solid	Filled, high-emphasis style
.jl-badge--pill	Fully rounded corners
.jl-badge__dot	Leading status dot element
.jl-badge__remove	Trailing × button (dismissible)