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 "@desk/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	`React.ElementType<any, keyof React.JSX.IntrinsicElements>`	`"span"`	Render element.
disabled	`boolean`
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