Pill

The Pill component displays compact metadata, a status, or a small action. Keep its label short so it remains easy to scan.

Import

1import { Pill } from '@payloadcms/ui'

Default

Dark

Success

Warning

Error

Loading component example…

Use semantic styles only when the label represents that state. For example, use error for a failed state rather than decoration.

Default

Rounded

Loading component example…

Pills use Payload's standard small corner radius by default. Add rounded when the label should use a fully rounded shape.

Small

Medium

Loading component example…

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Visible pill content.
`pillStyle`	`'light' \| 'light-gray' \| 'dark' \| 'white' \| 'always-white' \| 'success' \| 'warning' \| 'error'`	`'light'`	Sets the visual style.
`size`	`'small' \| 'medium'`	`'medium'`	Sets the pill height and spacing.
`rounded`	`boolean`	`false`	Uses a fully rounded shape.
`icon`	`ReactNode`	—	Displays an icon beside the label.
`onClick`	`() => void`	—	Renders the pill as a button.
`to`	`string`	—	Renders the pill as a navigational link.

Was this page helpful?