The three statuses above and their possible values:
For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal. |
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.
Contributors | |
|---|---|
Slack channel | If one exists, paste a link to the working Slack channel... |
Paragon Jira ticket | https://openedx.atlassian.net/browse/PAR-156?atlOrigin=eyJpIjoiMzYwYjkzZGVmMzNlNDZhOGE5MWEzZTc0MTYwMGI3ZjQiLCJwIjoiaiJ9 https://openedx.atlassian.net/browse/PAR-113?atlOrigin=eyJpIjoiNTNmOWU2Mjc2ODZmNDZjNWE2N2IxMjFmOGMzNDU5MTkiLCJwIjoiaiJ9 |
Other Jira tickets | Insert links to related work... |
Design resources | https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6703%3A52 |
Technical docs | Reference material: https://paragon-edx.netlify.app/components/badge/ |
VariantsType | Background color | Text color |
|---|---|---|
Primary | Primary 500 | White |
Secondary | Dark 200 | White |
Success | Success 500 | White |
Danger | Danger 500 | White |
Warning | Warning 300, Accent B | Black |
Info | Accent A | Black |
Light | Light 500 | Black |
Dark | Dark 700 | White |
Best Practices
| Use badges paired with another component to convey status, or provide additional details. | |
| Don’t use badges for freestanding text on a page. |
Related Components SpecificationWhat does an engineer need to know in order to build this component?
BehaviorsAdd rows to this table outlining individual behaviors of the component. | Not currently interactive |
|---|
AccessibilityFocus: | When coupled with another component, clicking the label should place focus on the associated component. |
|---|---|
Note: | Badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. Unless the context is clear, consider including additional context with a visually hidden piece of additional text. |
Notes from collaborator conversations or meetings regarding this component.
If the badge contains a clickable icon (e.g., an “X” for multi-select), what is the click target - the whole badge vs. just the clickable icon?
Slight preference for entire click badge as click target for usability.
What is the right name for this?
Badge vs. chip vs. tags vs. ???
If there’s a badge with only an icon, is the click target large enough?
We think there is!
Colors look nice!
Are there any variants / updates needed to support badges on a dark background?