DESIGN COMPLETE IMPLEMENTATION PENDING

What are these tags?

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS
DRAFT	DESIGN PENDING	IMPLEMENTATION PENDING
READY FOR REVIEW	DESIGN PLANNED	IMPLEMENTATION PLANNED
APPROVED TO ADD		IMPLEMENTATION IN PROGRESS
DEFERRED		IMPLEMENTATION COMPLETE
NEEDS CHANGES

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	Jon F
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
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/

Design

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6703%3A52

🌳 Variants

Type	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

Do	Use badges paired with another component to convey status, or provide additional details.
Don't	Don’t use badges for freestanding text on a page.

♊ Related Components

📐 Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6713%3A14227

♒ Behaviors

	Not currently interactive

💕 Accessibility

Focus:

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.

Source: https://react-bootstrap.github.io/components/badge/

Notes

Notes from collaborator conversations or meetings regarding this component.

26 Jan 2021

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?

We will reconsider the naming and interactivity of the Badge when we add a Multiselect component