Pill

Pill - internal base component for pill-shaped UI elements. This is a noop: it applies shared variant styling and renders children. Not intended for direct use in application code. Use Badge (presentational) or Tag (interactive) instead.

HonedPolishedIn stock

Usage

import { Pill, PILL_EMPHASES, PILL_ICON_SIZE_MAP, PILL_SIZES, PILL_TONES, PillEmphasis, PillProps, PillSize, PillTone, pillVariants } from "@instruments/materia-ui/components/pill";

Best practices

Don't reach for Pill in app code - it's the shared styling base; use Badge for display-only labels/counts and Tag for interactive (clickable/dismissible) chips.
Pill is presentation-only and has no button semantics or dismiss/click handling - those live on Tag; adding onClick here yields a non-accessible pseudo-button.

Props

Prop	Type	Default	Description
as	`keyof React.JSX.IntrinsicElements`	`"span"`	Host tag rendered when `render` is not given.
disabled	`boolean`
render	`useRender.RenderProp<Record<string, unknown>> \| undefined`		Replace the rendered element with another element or component.
ref	`React.Ref<HTMLElement> \| undefined`		Ref to the rendered element.
size	`ResponsiveSize \| null \| undefined`	`"base"`	Pill size - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`. `null` falls back to the default.
tone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
emphasis	`"outline" \| "solid" \| "ghost" \| "soft" \| "transparent" \| null \| undefined`
asInput	`boolean \| null \| undefined`		Input-style chip: white bg + subtle shadow (unselected state).

Also exports

constPILL_EMPHASES
constPILL_ICON_SIZE_MAP
constPILL_SIZES
constPILL_TONES
typePillEmphasis
interfacePillProps
typePillSize
typePillTone
constpillVariants

Composition

Used by

Badge, Tag, TagSelector