PU-Badge Component
A customizable badge component with support for icons and different severity styles.
Usage
Basic Usage
New Feature
With Icon
All Variants
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 ::