Label

Component for labelling content with certain keywords, showing unread content, highlighting new content and displaying status.

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.

Label.Dot composes Hint Dot component.

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#

Prop
Type
Default
as
enum
span
css
StitchesCss
No default value
color
enum
"neutral"
variant
enum
"strong"
circular
boolean
No default value
size
enum
medium
startElement
React.ReactElement
No default value
endElement
React.ReactElement
No default value
isDisabled
boolean
No default value
onRemove
function
No default value
showOutlineRing
boolean
No default value
margin
SpacingToken
No default value
marginX
SpacingToken
No default value
marginY
SpacingToken
No default value
marginBottom
SpacingToken
No default value
marginLeft
SpacingToken
No default value
marginRight
SpacingToken
No default value
marginTop
SpacingToken
No default value

Label.Dot#

Prop
Type
Default
css
StitchesCss
No default value
color
ColorToken
No default value