Jump to main content


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

Note:These labels are used to inform status of components in Vanilla.


Generic label that carries no semantic meaning.


Label to be used on newly released components, utilities or settings that are safe to use in projects.


Label to be used on components, utilities or settings are in the process of being removed and should no longer be used in projects.

In progress

Label to be used when a design spec and code implementation are not yet finished.


Label to be used on existing components, utilities or settings that have been updated either through design or code.


Label to be used on a proposal approved in our bi-weekly meeting. A design spec is created and development starts ready for code review.


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/scss/vanilla';
@include vf-base;

@include vf-p-label;

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


For more information view the labels design spec which includes the specification in markdown format and a PNG image.