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 (SCSS)#
$badge-font-size: 75% !default;$badge-font-weight: $font-weight-bold !default;$badge-padding-y: .125rem !default;$badge-padding-x: .5rem !default;$badge-border-radius: .25rem !default;$badge-transition: none !default;$badge-focus-width: $input-btn-focus-width !default;$badge-pill-padding-x: .6em !default;$badge-pill-border-radius: 10rem !default;
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 | 21.13.1 | 17 | |
| frontend-app-authn | 22.7.0 | 1 | |
| frontend-app-course-authoring | 22.6.1 | 11 | |
| proctoring | 22.6.1 | 1 | |
| xpert_unit_summary | 22.6.1 | 1 | |
| frontend-app-discussions | 22.1.1 | 3 | |
| frontend-app-ecommerce | 20.46.3 | 2 | |
| frontend-app-enterprise-public-catalog | 21.13.1 | 8 | |
| frontend-app-learner-dashboard | 22.7.0 | 5 | |
| frontend-app-learner-portal-enterprise | 21.13.1 | 19 | |
| frontend-app-learner-record | 22.7.0 | 5 | |
| frontend-app-learning | 22.3.0 | 1 | |
| frontend-app-library-authoring | 21.11.3 | 2 | |
| frontend-app-ora-grading | 21.11.3 | 1 | |
| frontend-app-payment | 22.1.1 | 1 | |
| frontend-app-publisher | 20.46.3 | 1 | |
| frontend-app-support-tools | 20.46.0 | 4 | |
| frontend-component-header-edx | 21.11.4 | 2 | |
| catalog-search | 21.13.1 | 3 | |
| frontend-lib-content-components | 22.0.0 | 2 | |
| prospectus | 20.46.2 | 7 |