A small rounded label for a short piece of static text — a status word, a count, a
category tag. Pill renders a plain <div>: it has no click handler, dismiss affordance, or
selected state, so despite the visual similarity it is not this library's implementation
of M3 Chips.
Pill is a lightweight, presentational-only label component.
It shares the filled-button color classes for its system-color variants (so it always
matches the active theme), plus two fixed accent colors (yellow / green) for status-style badges (e.g. "New", "Beta") that
should read consistently regardless of the active color scheme.
If you need an interactive, selectable, or dismissible tag — the actual M3 Chips pattern — reach for a different component; this library does not currently ship one under that name.
import { Pill } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Variant Control over all eleven color options.
<script lang="ts">
import { Pill } from '@noxlovette/material';
</script>
<Pill variant="primary-container">New</Pill> | Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | — | The pill's content, usually a short text label. |
variant | "primary" | "secondary" | "tertiary" | "error" | "container" | "primary-container" | "secondary-container" | "tertiary-container" | "error-container" | "yellow" | "green" | "primary" | Color styling. The five system-color options reuse the filled button color roles; container/tonal-container variants are lower-emphasis; yellow/green are fixed accent colors for status-style labels. |
Color pairing
Every variant pairs a background with its matching on-* text color token, guaranteeing AA contrast by construction.
Not a control
Pill renders a plain <div> with no interactive role — do not use it for anything the user needs to activate; use Button, ButtonIcon, or Toggle instead.