# 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

# Misc

# Customization options

The v-badge component is flexible and can be used in a variety of use-cases over numerous elements. Options to tweak the location are also available through the offset-x and offset-y props."

# Dynamic notifications

You can incorporate badges with dynamic content to make things such as a notification system.

# Show on hover

You can do many things with visibility control, for example, show badge on hover.

# Tabs

Badges help convey information to the user in a variety of ways.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/12/2024, 6:59:50 AM