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


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

# Inline

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

# Content

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

Ready for more?

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