LabelChip

A label an issue, pull request or record carries, drawn as a small pill in the label's own colour.

bugenhancementneeds triagegood first issuedesignwontfixdocs

BugFeaturePerformance

View code

tsx

<LabelChip color="#d73a4a">bug</LabelChip>
<LabelChip color="#a2eeef">enhancement</LabelChip>
<LabelChip color="#fbca04">needs triage</LabelChip>
<LabelChip color="#0e8a16">good first issue</LabelChip>
<LabelChip color="#5319e7">design</LabelChip>
<LabelChip color="#1d1d1f">wontfix</LabelChip>
<LabelChip hue={245}>docs</LabelChip>

<LabelChip variant="dot" color="oklch(0.63 0.19 25)">Bug</LabelChip>
<LabelChip variant="dot" color="oklch(0.62 0.13 150)">Feature</LabelChip>
<LabelChip variant="dot" color="oklch(0.74 0.14 75)">Performance</LabelChip>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add label-chip

Usage

typescript

import { LabelChip } from "@sdxc/ui";

Renders the chip as plain HTML and CSS. A pill derives tint, border and text from the colour at fixed OKLCH lightness through light-dark(), so text clears 4.5:1 for every hue in the page's color-scheme; the dot variant reads neutral roles. Rules read the colour from --ui-label-chip-color.

Examples

tsx

<LabelChip hue={150}>{t("labels.feature")}</LabelChip>

tsx

<LabelChip variant="dot" color={label.color}>{label.name}</LabelChip>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`color`	`string`	No	Any CSS colour (`#d73a4a`, `oklch(0.63 0.19 25)`), as the label was defined.
`hue`	`number`	No	A hue in degrees, used when `color` is absent; it stands for a mid-tone colour.
`variant`	`"pill" \| "dot"`	No
`children`	`RemixNode`	No	The label's name.

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Variant`	`"pill" \| "dot"`	How the colour shows: `pill` tints the whole chip and its text, `dot` keeps a neutral outlined chip with the colour in a dot before the name, for dense rows.