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
React.ElementTypeDefault'span'Specifies element type for this component
- variant
typeof STYLE_VARIANTS[number]Default'primary'Visual style of the badge. The full type definition can be seen here
- pill
booleanDefaultfalseAdd 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.11.2 | 1 | |
frontend-app-course-authoring | 22.8.1 | 14 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 3 | |
frontend-app-ecommerce | 20.46.3 | 2 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 8 | |
frontend-app-learner-dashboard | 22.9.0 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 20 | |
frontend-app-learner-record | 22.10.0 | 5 | |
frontend-app-learning | 22.10.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-ora-grading | 21.11.3 | 1 | |
frontend-app-payment | 22.9.0 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 5 | |
frontend-component-header-edx | 21.13.1 | 2 | |
catalog-search | 21.13.1 | 4 | |
prospectus | 20.46.2 | 7 |