← Back to documentation
Badge
A badge can be used to display unread notifications, item counts or status indicators among other things.
Information
Plan: Personal
Properties
| Property | Type | Default |
|---|---|---|
| Text | string | "Text" |
| Theme | enum<string> | "" |
| Font size | string | "0.75rem" |
| Font weight | string | "600" |
| Color | string | "var(--pc-semantic-status-primary-text)" |
| Color - Primary | string | "var(--pc-semantic-status-primary-text)" |
| Color - Success | string | "var(--pc-semantic-status-success-text)" |
| Color - Warning | string | "var(--pc-semantic-status-warning-text)" |
| Color - Danger | string | "var(--pc-semantic-status-danger-text)" |
| Text shadow | string | "none" |
| Line height | string | "1" |
| Letter spacing | string | "0" |
| Text transform | enum<string> | "none" |
| White space | string | "nowrap" |
| Background | string | "none" |
| Background color | string | "var(--pc-semantic-status-primary-soft)" |
| Background color - Primary | string | "var(--pc-semantic-status-primary-soft)" |
| Background color - Success | string | "var(--pc-semantic-status-success-soft)" |
| Background color - Warning | string | "var(--pc-semantic-status-warning-soft)" |
| Background color - Danger | string | "var(--pc-semantic-status-danger-soft)" |
| Opacity | string | "1" |
| Border radius | string | "999px" |
| Border width | string | "0px" |
| Border color | string | "transparent" |
| Border color - Primary | string | "transparent" |
| Border color - Success | string | "transparent" |
| Border color - Warning | string | "transparent" |
| Border color - Danger | string | "transparent" |
| Border style | string | "solid" |
| Box shadow | string | "none" |
| Padding | string | "0.35rem 0.75rem" |
| Margin | string | "0px" |
| Position | enum<string> | "relative" |
| Top | string | "auto" |
| Right | string | "auto" |
| Bottom | string | "auto" |
| Left | string | "auto" |
| Z-index | string | "auto" |
| Width | string | "auto" |
| Minimum width | string | "auto" |
| Maximum width | string | "none" |
| Height | string | "auto" |
| Minimum height | string | "auto" |
| Maximum height | string | "none" |
| Is visible | boolean | true |
| Selectors | array | [] |
Variants
| Variant | Description |
|---|---|
| Primary (Soft) | Coming soon... |
| Success (Soft) | Coming soon... |
| Warning (Soft) | Coming soon... |
| Danger (Soft) | Coming soon... |
| Primary (Solid) | Coming soon... |
| Success (Solid) | Coming soon... |
| Warning (Solid) | Coming soon... |
| Danger (Solid) | Coming soon... |
| Primary (Outline) | Coming soon... |
| Success (Outline) | Coming soon... |
| Warning (Outline) | Coming soon... |
| Danger (Outline) | Coming soon... |
| Muted | Coming soon... |
| Large Pill | Coming soon... |
| Small | Coming soon... |
| Dot | Coming soon... |
| Notification | Coming soon... |