Label

Import#

import { Label } from '@volue/wave-react';

Examples#

Sizes#

Label comes in two sizes: medium and small. By default, it uses medium size.

Colors#

Label can be used to communicate an object's status or attribute, and thus support multiple color schemes. Wave's standard palettes are available via the color prop.

Variants#

Each color can be used with its default (strong) appearance or with subtle and outline variants.

Subtle and outline labels have more minimal appearance and can be used to avoid visual overload.

With icons#

Label can be decorated with supporting icons using startElement and endElement props.

With dots#

Label can be decorated with dot indicator by passing Label.Dot to startElement prop.

Shape#

Each label type can be circular.

Circular labels are typically used for counts:

Removable label#

A label can be used as a tag with close button. Use onRemove property to make label removable.

Custom theming#

For non-standard use cases, Label supports theming via css prop which gives you access to any color token:

Possible applications#

Labels can be used within block lists, buttons, headings and more:

With help of Anchor component you can attach Label to a corner of an element:

API Reference#

Label#

Label.Dot#