Chip

Owned by Bronwyn Hawkins (Deactivated), created
Last updated: Jun 04, 2021 by Adam Butterworth (Deactivated)
1 min read

DESIGN COMPLETE IMPLEMENTATION PENDING

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

DESIGN IN PROGRESS

IMPLEMENTATION IN PROGRESS

DEFERRED

DESIGN COMPLETE

IMPLEMENTATION COMPLETE

NEEDS CHANGES

Β 

Β 

For more information see the Contribution Process | Step 1 – Start a component proposal.

Chips are compact elements that represent an input, attribute, or action.

Contributors

@Bronwyn Hawkins (Deactivated) @Jon F

Slack channel

Paragon Jira ticket

https://openedx.atlassian.net/browse/PAR-437

Other Jira tickets

Design resources

Technical docs

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

Design

material.io/components/chips

Use case example: 3 chips appearing under a form field allow a user to choose a username.

Β 

https://www.figma.com/file/0uBm1o7nH2ExePrRXGvB7Z/Logistration?node-id=1071%3A15033

Variants

Β 

Β 

Β 

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

Best Practices

Do

  • Do have an interactive element in a chip

  • Do use the Dark variant against dark backgrounds

Don't

  • Don’t have more than 1 interactive element in a chip

  • Don’t use the Dark variant against light backgrounds

Related Components

Similar to the Badge component, but interactive.

Specification

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

Redlined Design Spec

Behaviors

Accessibility

Β 

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX

Β 

Β