---
url: /api/css/pill.md
---
# CSS: pill

`.instui-pill` — A compact status label; add a leading glyph with the shared `-icon-<name>` form.

Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.

**Source:** [pill.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/pill/pill.css)

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/pill.css";
```

## Examples

```html
<div class="instui-view --display-flex --gap-md">
  <span class="instui-pill -color-success -icon-check">Published</span>
  <span class="instui-pill">Draft</span>
  <span class="instui-pill -color-info">In review</span>
  <span class="instui-pill -color-warning">Stale</span>
  <span class="instui-pill -color-danger">Blocked</span>
  <span class="instui-pill -color-violet">Pastel</span>
</div>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-color-aurora` | Aurora accent status. |
| `.-color-danger` | Error status. |
| `.-color-info` | Informational status. |
| `.-color-neutral` | A neutral status. |
| `.-color-orange` | Orange accent status. |
| `.-color-plum` | Plum accent status. |
| `.-color-sea` | Sea accent status. |
| `.-color-sky` | Sky accent status. |
| `.-color-stone` | Stone accent status. |
| `.-color-success` | Positive status. |
| `.-color-violet` | Violet accent status. |
| `.-color-warning` | Cautionary status. |
| `.-icon-*` | A leading glyph from the icon set (e.g. `-icon-check`), painted before the label. |
| `.-size-large` | The largest pill size. |
| `.-size-medium` | The medium pill size. |
| `.-size-x-small` | The smallest pill size. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::before` | The leading icon glyph, sized and spaced to the pill. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-pill-aurora-background-color` | `<color>` | `light-dark(#C8F3DF, #01442F)` |
| `--instui-component-pill-aurora-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-aurora-text-color` | `<color>` | `light-dark(#007352, #2BC692)` |
| `--instui-component-pill-base-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-base-text-color` | `<color>` | `light-dark(#273540, #F2F4F5)` |
| `--instui-component-pill-border-radius` | `<length>` | `999rem` |
| `--instui-component-pill-border-style` | — | `solid` |
| `--instui-component-pill-border-width` | `<length>` | `0.0625rem` |
| `--instui-component-pill-error-background-color` | `<color>` | `#E62429` |
| `--instui-component-pill-error-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-error-text-color` | `<color>` | `#ffffff` |
| `--instui-component-pill-font-family` | `[ <font-family-name> \| <generic-font-family> ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` |
| `--instui-component-pill-gap-content` | `<length>` | `0.125rem` |
| `--instui-component-pill-gap-icon-label` | `<length>` | `0.25rem` |
| `--instui-component-pill-gap-icon-label-large` | `<length>` | `0.5rem` |
| `--instui-component-pill-gap-icon-label-medium` | `<length>` | `0.5rem` |
| `--instui-component-pill-height` | `<length>` | `1.5rem` |
| `--instui-component-pill-height-large` | `<length>` | `2rem` |
| `--instui-component-pill-height-medium` | `<length>` | `1.75rem` |
| `--instui-component-pill-height-x-small` | `<length>` | `1.25rem` |
| `--instui-component-pill-info-background-color` | `<color>` | `light-dark(#DEEBFF, #123E62)` |
| `--instui-component-pill-info-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-info-text-color` | `<color>` | `light-dark(#2369A4, #7FB4F1)` |
| `--instui-component-pill-line-height` | `<length>` | `0.875rem` |
| `--instui-component-pill-max-width` | `<length>` | `240px` |
| `--instui-component-pill-neutral-background-color` | `<color>` | `light-dark(#E8EAEC, #2D3D49)` |
| `--instui-component-pill-orange-background-color` | `<color>` | `light-dark(#FFE4D7, #682400)` |
| `--instui-component-pill-orange-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-orange-text-color` | `<color>` | `light-dark(#B23F01, #FF905A)` |
| `--instui-component-pill-padding-horizontal` | `<length>` | `0.5rem` |
| `--instui-component-pill-padding-horizontal-large` | `<length>` | `0.75rem` |
| `--instui-component-pill-padding-horizontal-medium` | `<length>` | `0.75rem` |
| `--instui-component-pill-padding-vertical` | `<length>` | `0.25rem` |
| `--instui-component-pill-plum-background-color` | `<color>` | `light-dark(#FAE3EF, #651E4C)` |
| `--instui-component-pill-plum-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-plum-text-color` | `<color>` | `light-dark(#A83780, #EC93C6)` |
| `--instui-component-pill-sea-background-color` | `<color>` | `light-dark(#CFF0F6, #00424A)` |
| `--instui-component-pill-sea-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-sea-text-color` | `<color>` | `light-dark(#02717E, #3CC0D4)` |
| `--instui-component-pill-sky-background-color` | `<color>` | `light-dark(#D6EDFE, #084059)` |
| `--instui-component-pill-sky-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-sky-text-color` | `<color>` | `light-dark(#116D94, #63B9EB)` |
| `--instui-component-pill-status-label-font-weight` | `<integer>` | `400` |
| `--instui-component-pill-stone-background-color` | `<color>` | `light-dark(#E9E9E9, #3A3A3A)` |
| `--instui-component-pill-stone-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-stone-text-color` | `<color>` | `light-dark(#646464, #AFAFAF)` |
| `--instui-component-pill-success-background-color` | `<color>` | `light-dark(#CAF4D0, #01451B)` |
| `--instui-component-pill-success-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-success-text-color` | `<color>` | `light-dark(#017533, #61C378)` |
| `--instui-component-pill-text-font-size` | `<length>` | `0.75rem` |
| `--instui-component-pill-text-font-size-large` | `<length>` | `1rem` |
| `--instui-component-pill-text-font-size-medium` | `<length>` | `0.875rem` |
| `--instui-component-pill-text-font-weight` | `<integer>` | `400` |
| `--instui-component-pill-violet-background-color` | `<color>` | `light-dark(#F3E5F7, #522965)` |
| `--instui-component-pill-violet-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-violet-text-color` | `<color>` | `light-dark(#8A49A7, #CAA1D9)` |
| `--instui-component-pill-warning-background-color` | `<color>` | `light-dark(#F7E7CF, #4D3600)` |
| `--instui-component-pill-warning-border-color` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-pill-warning-text-color` | `<color>` | `light-dark(#664800, #E0A300)` |
| `--instui-font-size-text-xs` | `<length>` | `0.75rem` |

## Related

* [badge](/api/css/badge.md) — A badge is the count or notification counterpart.
* [tag](/api/css/tag.md) — A tag is the removable, form-oriented counterpart.