CleenUI · Data Display · PillBadge

PillBadge

Small pill-shaped badge with semantic variants and optional icon.

storybook.cleenui.com · data-display-pillbadge--red
Open in new window

About PillBadge

PillBadge is the small status indicator: pill-shaped, semantic-colored, optional leading icon. Use it for short status labels, counts, and category tags.

Five semantic variants (info, success, warning, error, neutral) plus a brand variant cover the typical needs. Sizes range from tiny inline-with-text to standalone medium.

When to use it

  • Status indicators on records (Active, Pending, Failed).
  • Category or tag chips.
  • Notification count indicators on icons.
  • Plan or tier badges (Free, Pro, Enterprise).

Common props

Prop
Type
Description
variant
"info" | "success" | "warning" | "error" | "neutral" | "brand"
Semantic color.
size
"xs" | "sm" | "md"
Pill size.
icon
string
Optional leading icon name.
children
ReactNode
Pill content.
outline
boolean
Outline-style variant.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

3
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.