Skip to content
On this page

Badge

Default

Default color for badge is primary.

9
9
avatar
9

Content

Use the prop content to pass numeric values, if you want to use other data different than a number use the slot content instead.

9
9

v-model support

You can use v-model to control hiding/showing the badge.

9

Color

You can use the color prop to change the badge color.

9
9
9
9
9

Dot

Use the prop dot to transform the badge into a dot.

Anchor origin

Change the position of the badge by passing top/bottom and left/right values to the anchor prop.

9
9
9
9

Max

Change the max prop to cap the numeric value of the content.

9+
99+
999+

Overlap

Use overlap prop to adjust the position of the badge, if you need more refined adjustments you can use the offsetX or offsetY props.

By default overlap prop is true.

Roundness

You can adjust badge roundness using border-radius utilities.

9
9
9
9
9

Sizing

You can use font-size utility to adjust the size of badge.

9
9

API

Badge

modelValue : boolean

Show/Hide badge based on v-model value

color : ColorProp

Sets badge color

anchor : "top left" | "top right" | "bottom left" | "bottom right"

Sets the badge position

dot : boolean

Converts badge to a dot

bordered : boolean

Adds badge border

overlap : boolean

Adjusts position of badge

offsetX : string | number

Sets offset on x-axis

offsetY : string | number

Sets offset on y-axis

content : string | number

Use to pass numeric values

max : number

Sets the highest possible value

default : any

Default slot for rendering badge content

Released under the MIT License.