Badge

Badge is a small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.

Import

javascript

import { VBadge } from 'vuetify'

Usage

badge

html

<v-badge label="badge" />

Badges

Label

html

<v-badge />
<v-badge color="danger" />
<v-badge color="warning" />
<v-badge color="primary" />
<v-badge color="upgrade" />
<v-badge color="tertiary" />
<v-badge color="info" />
<v-badge color="neutral" />

Badge chips

Label

html

<v-badge chip />
<v-badge color="danger" chip />
<v-badge color="warning" chip />
<v-badge color="primary" chip />
<v-badge color="upgrade" chip />
<v-badge color="tertiary" chip />
<v-badge color="info" chip />
<v-badge color="neutral" chip />

Badge status

Label

html

<v-badge status />
<v-badge color="danger" status />
<v-badge color="warning" status />
<v-badge color="primary" status />
<v-badge color="upgrade" status />
<v-badge color="tertiary" status />
<v-badge color="info" status />
<v-badge color="neutral" status />

Badge with custom image

Label

html

<v-badge color="success" icon><UserIcon /></v-badge>

Badge #

Import #

Usage #

Badges #

Badge chips #

Badge status #

Badge with custom image #

Badge

Import

Usage

Badges

Badge chips

Badge status

Badge with custom image