Components
Chips
Chips allow users to enter information, make selections, filter content, or trigger actions.
Foundation
Chips are a simple component consisting only of a container and text label.
Container
Chips are a simple component consisting only of a container and text label.
Padding
Text labels are surrounded by even padding on all sides to ensure legibility and provide visual balance. Padding around the container should be kept tight enough that the chips can fit within small spaces but wide enough to support legibility.
Do
provide chips with enough padding to be legible.
Don't
Provide chips with little padding
Text label
The text label within a container relays tertiary information pertaining to other content it is closest too. Labels should be kept short and to the point DontRow>
Do
provide chips with direct and concise labels.
Don't
Provide chips with too texty labels
Margins
Always provide adequate margins around and between chips to support visual hierarchy and balance. We recommend a minimum 12 pixel margin between boxes and other elements, however this can be adjusted based on page density.
Do
provide chips with proper margins to be legible.
Don't
provide chips with too little margins
Placement
Chips can be placed wherever the main content they are supporting can be placed.
General usage
So long as chips are kept in close proximity to the content they are supporting, the placement of chips around that content is very flexible. Keeping chips in close proximity to the content they support is important because it allows users to make the connection between the two.
Do you have feedback?
Please let us know to make it better