Use the chip component to display small actionable pieces of information.
Chips come in 5 colours. The default is neutral (grey). Use any of the following flavours to style values that have semantic or otherwise colour-coded meaning:
Chips can include an icon to provide additional context or visual interest.
Chips have the option to be dismissed by including a button with a p-chip__dismiss class.
Dismissible chips should use the non-interactive <span class="p-chip"> rather than interactive <a> or <button> elements.
Dismissible chips should not include an icon, and should not use any of the semantic colours, as the dismiss button is already a visual indicator of the chip's state.
Chips can be accompanied by a badge to indicate a count or other information.
Chips with badges can also include a dismiss button. The dismiss button should be placed after the badge.
If you need to place a chip in a dense context, use the class is-dense to reduce the padding and overall height of the chip:
The default chip has margins and padding set so it aligns to paragraphs and within search fields. If you need to use as an inline element nested inside another element, use the class is-inline:
If you need to align the chip vertically within the text, use the vertical alignment utility:
Chips can be used to display read-only information, such as semantic statuses.
To create a read-only chip, use <span class="p-chip is-read-only">.
Read-only chips can also be displayed inline using is-inline. This is useful for displaying status-related information in inline contexts, such as tables and side navigation, where the default margin of the chip is not desired.
When including a chip in an environment with limited vertical space, you can use the is-dense class to reduce the height of the chip and prevent the chip from increasing the height of paragraph-sized elements.
Chips can be used as links. A link chip should not include a dismiss button, as interactive elements should not contain other interactive elements.
To use chips on a dark background the is-dark class can be applied. If the chip includes the dismiss icon, you'll need to add the is-light class to the icon. To ensure the dark chips are accessible, the background colour used must #2b2b2b or darker.
See an example of chips on dark background
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-chip;
@include vf-p-badge;
// when using icons, include their individual icon mixins as well
// @include vf-p-icon-edit;
// @include vf-p-icon-warning;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use chips in React by installing our react-component library and importing Chip component.