Badge Reference
Reference for Badge Reference in Web Framework References. Key properties: ID, Class, Badge, Position.
Small label/count badge. Use to display counts or labels next to text; choose variant and optional pill/rounded style.
Inspector Property Groups
General
| Property | Type | Details |
|---|---|---|
| ID | text | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id |
| Class | text | Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class |
| Badge | text | Badge text content. Sets the text displayed inside the badge. Keep badge labels short (counts, statuses) so they don't dominate the UI. Bootstrap docs: Badge |
| Position | droplist | Badge position helper. Controls how the badge is positioned relative to its parent. Positioned badges often use positioning utilities (like position-absolute ) combined with translate-middle . Bootstrap docs: Positioned badges Options: Default, Prefix, Suffix |
| Style | colorlist | Options: Default, Primary, Secondary, Success, Danger, Warning |
| Pill | boolean | Makes the badge pill-shaped. Makes the badge pill-shaped. This typically applies rounded-pill . Bootstrap docs: Pill badges |