Badge

A small badge that shows what state something is in. The colour is set with data-color.

How to use it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/badge/badge.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->

<span class="lt-badge">In progress</span>
<span class="lt-badge" data-color="success">Approved</span>
<span class="lt-badge" data-color="warning">Attachment missing</span>
<span class="lt-badge" data-color="danger">Rejected</span>
<span class="lt-badge" data-color="neutral">Archived</span>

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/badge.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<span {...lt.badge()}>In progress</span>

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If you have the element in a variable, set them on it with setAttributes. That is the way without JSX, whether you just created the element or found it in a page the server sent:

import { lt, type BadgeColor } from "@lo-tek/interfaces"

const badge = document.createElement("span")
badge.textContent = "Approved"

lt.setAttributes(badge, lt.badge({ color: "success" }))

If the colour comes from an API, validate it first:

const color: BadgeColor = lt.badge.isColor(response.status) ? response.status : "info"

lt.setAttributes(badge, lt.badge({ color }))

lt.setAttributes also clears attributes from the previous call, so the badge can change colour without the old one staying behind. See Type-safe use.

`data-color`	Used for
(omitted)	Information, ongoing state. `lt.badge({ color: "info" })` gives the same, without an attribute
`success`	Completed, approved, active
`warning`	Needs attention, but is not an error
`danger`	Rejected, expired, critical
`neutral`	Inactive, archived, unknown

In a list

The badge usually sits next to what it describes. Here in a List with dividers between the rows:

Example
Plain HTML

<ul class="lt-list" data-variant="divided">
<li>Invoice 2026-0481 <span class="lt-badge" data-color="success">Paid</span></li>
<li>Invoice 2026-0482 <span class="lt-badge" data-color="danger">Overdue</span></li>
</ul>

If the badge should sit at the right of the row, the app’s layout decides that, with display: flex and justify-content: space-between on the li element.

Classes you can style

Class	What it is
`.lt-badge`	The badge itself. The colour comes from `data-color`.

Variable	Default
`--lt-badge-padding`	`var(--lt-spacing-0-5) var(--lt-spacing-2)`
`--lt-badge-radius`	`var(--lt-spacing-4)`

See Customising for how the variables and the layer work.

Accessibility

Colour alone says nothing to a screen reader. The text has to carry the meaning: “Rejected”, not just a red dot.
<span> inside a line of text, <div> when the badge stands alone.
If the badge changes while the page is otherwise still, put role="status" and aria-live="polite" on the element around it.