# LabelChip

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

```ts
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 color="#d73a4a">bug</LabelChip>
```

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

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

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `string` | Any CSS colour (`#d73a4a`, `oklch(0.63 0.19 25)`), as the label was defined. |
| `hue?` | `number` | A hue in degrees, used when `color` is absent; it stands for a mid-tone colour. |
| `variant?` | `"pill" \| "dot"` |  |
| `children?` | `RemixNode` | 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. |