Jump to main content

Status labels are static elements which you can apply to signify status, tags or any other information you find useful.

Deprecation warning: p-label and its variants are deprecated and may be removed in future version of Vanilla. Use p-status-label instead.

Import

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-status-label;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

React

You can use status labels in React by installing our react-component library and importing StatusLabel component.

See the documentation for our React StatusLabel component