Loading navigation…
User
API and Development
Pill displays compact, rounded badges for categorizing, tagging, or displaying short pieces of information with optional icons and dismiss functionality. It provides a versatile badge component supporting multiple size and color variants, icons, interactive behavior, and dismiss functionality. Built on Radix UI's Badge component, it ensures consistent pill patterns across the interface with full keyboard and screen reader accessibility.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Semantic color variant for the pill. |
|
|
| When true, disables interaction on the pill. |
|
|
| — |
|
|
| When true with |
|
| — | When set, renders the pill as a link instead of a button-like control. |
|
| — | Optional SVG icon displayed before the pill text. |
|
|
| Visual style variant when the pill is interactive. |
|
| — | Click handler that makes the pill interactive. |
|
| — | — |
|
| — | Mouse enter handler for hover interactions. |
|
| — | Mouse leave handler for hover interactions. |
|
|
| Controls the pill dimensions and font size. |
Interactive examples and edge cases for this component are in Storybook.
Use for simple labels or categorization without interaction.
Choose size based on context and content density.
Use in tight spaces or dense layouts.
Default size for most use cases.
Use for prominent tags or when increased visibility is needed.
Use color variants to convey semantic meaning or visual hierarchy.
Use for neutral categorization without specific semantic meaning.
Indicates informational content or items that merit awareness.
Indicates success, completion, or positive states.
Highlights caution or intermediate states that need attention.
Signals errors, failures, or critical issues.
Add icons to provide visual context or quick recognition.
Enable dismissal for removable tags or filters. The dismiss control is an IconToggle with a dedicated container class so icon fill and sizing stay consistent with the pill variant.
Make pills clickable for navigation or action triggers.
Pass href to render the pill as an anchor. Use external for a new-tab link with an external-link icon and accessible new-window announcement.
When href and dismissible are both set, the dismiss control renders as a sibling of the anchor so a dismiss click does not navigate. disabled drops href, target, and rel, and exposes aria-disabled.
Use interaction types to control hover and focus styling.
Disable interactive pills when actions are unavailable.
Handle hover states for enhanced interactivity.
Combine icons and dismiss functionality.
Compare different sizes side by side.
Compare different color variants.