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.