Badges are composed of text and an accompanying indicator color, and are typically used to add meaning, status, or context when paired with another component.
- Use badges paired with another component to convey status, or provide additional details
- Don’t use badges for freestanding text on a page
This is a pass through component from React-Bootstrap.
See React-Bootstrap for additional documentation.
Basic Usage
Show editable code example
Any Paragon component or export may be added to the code example.
Theme Variables#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
Badge Props API
- as
elementTypeDefault'span'Specifies element type for this component
- variant
enum'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'Default'primary'Visual style of the badge
- pill
boolDefaultfalseAdd the
pillmodifier to make badges more rounded with some additional horizontal padding - bsPrefix
stringDefault'badge'Overrides underlying component base CSS class name
Usage Insights#
Badge
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 22.18.0 | 24 | |
| frontend-app-authn | 23.12.2 | 1 | |
| frontend-app-course-authoring | 23.5.0 | 15 | |
| ora_settings | 23.5.0 | 1 | |
| proctoring | 23.5.0 | 1 | |
| xpert_unit_summary | 23.5.0 | 1 | |
| frontend-app-discussions | 23.4.5 | 3 | |
| frontend-app-ecommerce | 20.46.3 | 2 | |
| frontend-app-enterprise-public-catalog | 22.17.0 | 8 | |
| frontend-app-learner-dashboard | 23.12.2 | 2 | |
| frontend-app-learner-portal-enterprise | 22.17.0 | 20 | |
| frontend-app-learning | 22.17.0 | 2 | |
| frontend-app-ora-grading | 23.4.5 | 2 | |
| frontend-app-profile | 23.12.2 | 1 | |
| frontend-app-payment | 22.9.0 | 1 | |
| frontend-app-support-tools | 23.4.2 | 5 | |
| frontend-component-header-edx | 23.6.1 | 2 | |
| catalog-search | 22.20.2 | 4 |