Pill

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

Import

Inside a Payload Admin Panel Custom Component:

You can also import the component directly:

Styles

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

Shape

Pills use Payload's standard small corner radius by default. Add rounded when the label should use the larger rounded corner treatment.

Sizes

Accessibility

• Keep labels concise and ensure their meaning does not depend on color alone.
• Treat a Pill as presentational metadata. Use a Button or Link when the user needs to perform an action.
• Provide an accessible label when an icon communicates information that is not present in the visible text.

Common props

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