components badge

components/badge

Import: import { Badge, Chip } from "@tundralibs/ui/badge"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Badge

Badge(props: { label: string | Html; variant?: BadgeVariant; dot?: boolean; attrs?: Attrs }): Html

Chip

Chip(props: { label: string | Html; removable?: boolean; static?: boolean; attrs?: Attrs }): Html

Types

BadgeVariant

• "neutral"
• "primary"
• "accent"
• "success"
• "warning"
• "danger"
• "info"
• "code"

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A status with a dot

Badge({ label: "Overdue", variant: "danger", dot: true })

<span class="badge badge--danger">
  <span class="badge__dot" aria-hidden="true"></span>
  Overdue
</span>

A removable filter chip

Chip({ label: "Status: Open", removable: true })

<span class="chip chip--removable" data-dismissible="">
  Status: Open
  <button type="button" class="chip__remove" data-dismiss aria-label="Remove Status: Open">&times;</button>
</span>

CSS hooks

Classes defined by components/badge/badge.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.badge, .badge--accent, .badge--code, .badge--danger, .badge--info, .badge--neutral, .badge--primary, .badge--success, .badge--warning, .badge__dot, .chip, .chip--removable, .chip__remove