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.

Usage

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

API

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 subtlely.

v-badge/prop-dot.vue

Inline

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

v-badge/prop-inline.vue

Content

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

v-badge/prop-content.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.