Badges

The v-badge component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons.

<PageFeatures />

Usage

Badges in their simplest form display to the upper right of the content that it wraps and requires the badge slot.

<ExamplesUsage name="v-badge" /> <PromotedEntry />

API

Component	Description
v-badge	Primary Component

<ApiInline hide-links />

Examples

Props

Dot

The dot property removes badge's content and reduces its overall size. This is useful when you need to draw a user's attention subtly.

<ExamplesExample file="v-badge/prop-dot" />

Inline

Inline badges can be placed anywhere with content and can render without a default slot.

<ExamplesExample file="v-badge/prop-inline" />

Content

For simple text, use the content property to display a value on the badge.

<ExamplesExample file="v-badge/prop-content" />