Badge

A small label for a status or category.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Badge-0.tess

<template>
  <div>
    <Badge>Draft</Badge>
    <Badge tone="primary">New</Badge>
    <Badge tone="danger">Failed</Badge>
  </div>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Badge

pnpm exec tessera add Badge

yarn tessera add Badge

bunx @pixelscriptio/tessera add Badge

Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components.

system/components/Badge.tess

<contract>
{
  "name": "Badge",
  "role": "generic",
  "description": "A small label for a status or category.",
  "parts": ["root"],
  "variants": {
    "tone": ["neutral", "primary", "danger"] // first value is the default
  },
  "slots": { "default": "the label" },
  "preview": {
    "slots": {
      "default": "New"
    }
  }
}
</contract>

<template>
  <span class="root"><slot /></span>
</template>

<style>
.root {
  display: inline-flex;
  align-items: center;
  padding: $space.1 $space.3;
  border-radius: $radius.sm;
  background: $color.surface.hover;
  color: $color.text.default;
  font-size: $font.size.xs;
  font-weight: 500;

  &[data-tone='primary'] {
    background: $color.action.primary.bg;
    color: $color.action.primary.fg;
  }

  &[data-tone='danger'] {
    background: $color.action.danger.bg;
    color: $color.action.danger.fg;
  }
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.action.danger.bg color.action.danger.fg color.action.primary.bg color.action.primary.fg color.surface.hover color.text.default font.size.xs radius.sm space.1 space.3

Usage

Using Badge

A small label for a status or category.

Keep it to one or two words.
tone is neutral by default; use primary for the thing to notice and danger for a problem.
A badge is text, not a control. It is not focusable and has no events.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Badge-0.tess

<template>
  <div>
    <Badge>Draft</Badge>
    <Badge tone="primary">New</Badge>
    <Badge tone="danger">Failed</Badge>
  </div>
</template>

API reference

Variants

Variant	Values
`tone`	`neutral` default `primary` `danger`

Slots

Slot	Content
`default`	the label

Anatomy


Role	`generic`
Parts	`root`

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.action.danger.bg color.action.danger.fg color.action.primary.bg color.action.primary.fg color.surface.hover color.text.default font.size.xs radius.sm space.1 space.3

Checksum

7dd5f44017eef02d2174f54e5f06941f27897f01eab7898957834794147852f5