Display@knitui/components

Pill

Pill is a small rounded label, optionally with a remove button. Use Pill.Group to lay out multiple pills and inherit size/disabled. The contrast variant uses the active theme's solid accent ($color9); colour comes from the theme prop + palette ramp.

WebiOSAndroid2 style slots4 own props14 examples

Stories Source Tests Open in Storybook

import { Pill } from "@knitui/components";

Playground

Loading playground…

variantVisual style — default uses a subtle background, contrast uses the solid accent.

sizeControls height, horizontal padding and font size.

withRemoveButtonShow a trailing remove (×) button.

false

disabledReduced opacity and pointer events off.

false

themeActive theme accent — recolors the pill via the palette ramp.

children

Playground

<Pill
  variant="default"
  size="sm"
  withRemoveButton={false}
  disabled={false}
>
  Pill
</Pill>

Examples

Variants

Both visual variants side by side at the default size.

Loading example…

VariantsSource Storybook

Sizes

All seven sizes from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

Each elevation of the inherited shadow prop applied to the pill.

Loading example…

ShadowsSource Storybook

With Remove Button

Pill with a remove button — pressing × fires onRemove.

Loading example…

With Remove ButtonSource Storybook

Disabled

Disabled state — reduced opacity, pointer events off.

Loading example…

DisabledSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Gradient

Gradient fill — themed default (no gradient prop), a two-color shorthand, a token gradient, and a multi-step stops gradient (shown with a remove button — the × glyph turns white).

Loading example…

GradientSource Storybook

Gradient Presets

Curated gradient presets for the gradient variant.

Loading example…

Gradient PresetsSource Storybook

Gradient Themed

Themed gradient (no gradient prop) — the $color5→$color9 ramp follows the active theme.

Loading example…

Gradient ThemedSource Storybook

Group

Pill.Group lays out pills in a wrapping row and propagates size/disabled to children.

Loading example…

GroupSource Storybook

Removable Tags

A controlled tag-input pattern — click × to remove individual pills.

Loading example…

Removable TagsSource Storybook

Styles

Per-slot styles targets individual parts — here the label and the removeButton.

Loading example…

StylesSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`Pill`	Pill label.
`disabled` system	`boolean \| undefined`	`false`	Reduced opacity and pointer events off.
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }.
`onRemove`	`(() => void) \| undefined`	—	Called when the remove button is pressed.
`radius` system	`string \| number \| undefined`	—
`removeButtonProps`	`Partial<CloseButtonProps> \| undefined`	—	Props for the remove button. Spread OVER the `removeButton` style slot, so an explicit `removeButtonProps` wins over `styles={{ removeButton }}`.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	"sm" (or the enclosing `Pill.Group`'s size)	Controls height, horizontal padding and font size.
`styles` system	`SlotStyles<PillStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the pill via the palette ramp.
`variant` system	`PillVariant \| undefined` default · contrast · gradient	`"default"`	Visual style — default uses a subtle background, contrast uses the solid accent.
`withRemoveButton`	`boolean \| undefined`	`false`	Show a trailing remove (×) button.

Style slots

Every part of Pill can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`removeButton`	`styles={{ removeButton: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.