Badge

Owned by Jon F, created
Last updated: Jun 04, 2021 by Adam Butterworth (Deactivated)
2 min read

DESIGN COMPLETE IMPLEMENTATION COMPLETE

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

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 Contribution Process | Step 1 – 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

Paragon Design System

Technical docs

Reference material: https://paragon-edx.netlify.app/components/badge/

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

Β 

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

Variants

Β 

Type

Background color

Text color

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.

Jan 26, 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?

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

Β 

Β