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 have the option to be dismissed by including a button with a p-chip__dismiss class. Please note that by default the chip main element is a <button class="p-chip">, but to include a dismiss button it needs to be changed to non-interactive <span class="p-chip">.
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:
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;
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.