PU-Badge Component
A customizable badge component with support for icons and different severity styles.
Usage
Basic Usage
New Feature
New Feature
New Feature
With Icon
With Icon
With Icon
All Variants
Primary
Secondary
Ghost
Primary
Secondary
Ghost
Primary
Secondary
Ghost
| Prop | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | Text displayed inside the badge |
| icon | string | No | Icon name (requires PUIcon component) |
| severity | primary | secondary | ghost | No | Badge color variant (default: primary) |
| Variant | Classes | Description |
|---|---|---|
| Primary | border-primary-light-500 bg-primary-light-500 text-primary-dark-50 | Solid badge with primary colors (Default) |
| Secondary | border-primary-light-200 bg-primary-light-200 text-primary-light-500 | Subtle badge with secondary colors |
| Ghost | bg-transparent text-primary-light-500 | Transparent background with text and border |
- Uses font-patrick font family class
- Base styles applied with Tailwind-like utilities:
.pu-badge--default { @apply w-fit text-xs p-1 rounded-lg flex justify-between gap-2 items-center border-2; }
- Colors are dynamically applied based on severity prop
- Customizable through CSS variables or overriding the style classes
- Requires
PUIconcomponent for icon display - Uses Tailwind CSS (or compatible utility framework) for styling ::