VBadge API
name | type | default |
|---|---|---|
boolean
| false | |
Applies a 2px by default and 1.5px border around the badge when using the dot property. | ||
string
| undefined | |
Applies specified color to the control - supports utility colors with or without | ||
string | number | undefined | |
Text content to show in the badge. | ||
boolean
| false | |
Reduce the size of the badge and hide its contents. | ||
string | number | undefined | |
Sets the size of the dot variant (includes border when using with bordered) | ||
boolean
| false | |
Move the badge further away from the slotted content. Equivalent to an 8px offset. | ||
string | number | undefined | |
Sets the height for the component. | ||
| string | (string | [string, number])[] | (new () => any) | FunctionalComponent | undefined | |
Apply a specific icon using the v-icon component. | ||
boolean
| false | |
Display as an inline block instead of absolute position. location, floating, and offset will have no effect. | ||
string
| '$vuetify.badge' | |
The aria-label used for the badge. | ||
Anchor | 'top end' | |
Specifies the component’s location. Can combine by using a space separated string. | ||
string | number | undefined | |
Sets the maximum number allowed when using the content prop with a | ||
string | number | undefined | |
Sets the maximum height for the component. | ||
string | number | undefined | |
Sets the maximum width for the component. | ||
string | number | undefined | |
Sets the minimum height for the component. | ||
string | number | undefined | |
Sets the minimum width for the component. | ||
boolean
| true | |
Controls whether the component is visible or hidden. | ||
string | number | undefined | |
Offset the badge on the x-axis. | ||
string | number | undefined | |
Offset the badge on the y-axis. | ||
string | number | boolean | undefined | |
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page. | ||
string | (new () => any) | FunctionalComponent | 'div' | |
Specify a custom tag used on the root element. | ||
string
| undefined | |
Applies a specified color to the control text - supports utility colors with or without | ||
string
| undefined | |
Specify a theme for this component and all of its children. | ||
boolean
| false | |
Removes any applied border-radius from the component. | ||
string | boolean | (TransitionProps & { component: Component }) | 'scale-rotate-transition' | |
Sets the component transition. Can be one of the built in or custom transition. | ||
string | number | undefined | |
Sets the width for the component. | ||
name | default |
|---|---|
rgb(var(--v-theme-surface-variant)) | |
rgb(var(--v-theme-background)) | |
10px | |
solid | |
scale(1.05) | |
2px | |
tools.theme-color('on-surface-variant', var(--v-high-emphasis-opacity)) | |
50% | |
1.5px | |
9px | |
9px | |
settings.$body-font-family | |
.75rem | |
500 | |
1.25rem | |
0 -2px | |
4px 6px | |
middle | |
1 | |
20px | |
4px 6px | |
( $badge-background, $badge-color ) | |
.225s settings.$standard-easing | |
0 4px |