Types

Pointing

A label can point to content next to it.

Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more
Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more

Prompt

A label can prompt for an error in your forms.

The prompt prop can be used only inside Form component.
Please enter a value

Corner

A label can position itself in the corner of an element.

Ribbon

A label can appear as a ribbon attaching itself to an element.

OverviewAccount DetailsCommunityUser Reviews

Attached

A label can attach to a content segment.

HTML
CSS
Code
View
User View
Admin View

Horizontal

A horizontal label is formatted to label content along-side it horizontally.

Floating

A label can float above another element.

Content

Detail

A label can contain a detail

Icon

A label can include an icon

You can do the same using shorthands.

Image

A label can include an image

You can do the same using shorthands.

Variations

Circular

A label can be circular

Basic

A label can reduce its complexity

Colored

A label can have different colors

Size

A label can be small or large

Groups

Group Size

Labels can share sizes together

Colored Group

Labels can share colors together

Tag Group

Labels can share tag formatting

Circular Group

Labels can share shapes

This is the bottom
Blazing deployments by Vercel.