Built-in components
No install, no import, no registration. They are custom elements the library defines when it starts, so writing the tag is the whole usage.
Every component below is running on this page,
rendered by the same voodoo.full.min.js the install guide
hands you. The code under each one is the markup that produced it, and the props are read
out of the source rather than typed by hand.
<v-button><v-button variant="primary">Save</v-button>
<v-button variant="ghost">Cancel</v-button>
<v-button variant="primary" loading>Sending</v-button>Props
variant size icon iconRight type loading disabled block rounded ariaLabel
<v-icon-button><v-icon-button icon="plus" label="Add"></v-icon-button>
<v-icon-button icon="search" label="Search"></v-icon-button>
<v-icon-button icon="trash" label="Delete" variant="ghost"></v-icon-button>Props
icon label variant size type disabled loading rounded
<v-tooltip-button><v-tooltip-button tip="Copies to the clipboard">Copy</v-tooltip-button>Props
tooltip placement variant size icon type disabled ariaLabel
<v-input><v-input label="Email" type="email" placeholder="you@example.com"></v-input>Props
label type placeholder hint error value name id icon suffix size autocomplete inputmode maxlength min max step required disabled readonly clearable
<v-textarea><v-textarea label="Notes" rows="3"></v-textarea>Props
label placeholder hint error value name id rows maxlength size resize required disabled readonly counter
<v-select><div v-data="{ countries: ['Brazil', 'Portugal', 'Japan'] }">
<v-select label="Country" :options="countries"></v-select>
</div>Props
label placeholder searchPlaceholder emptyText options value hint error name id size multiple searchable clearable disabled required
<v-checkbox><v-checkbox label="Remember me"></v-checkbox>Props
label description error name id value checked disabled required
<v-radio><v-radio name="plan" label="Monthly"></v-radio>Props
label description error name id value checked disabled required
<v-switch><v-switch label="Notifications"></v-switch>Props
label description name id size checked disabled
<v-field><v-field label="Name" hint="As it appears on your card"></v-field>Props
label hint error for required disabled
<v-label><v-label for="email">Email</v-label>Props
for size required
<v-alert><v-alert tone="info" title="Heads up">The library starts itself.</v-alert>Props
tone title icon closable closeLabel
<v-badge><v-badge tone="success">Active</v-badge>
<v-badge tone="danger">Overdue</v-badge>Props
tone variant size icon dot
<v-tag><v-tag>design</v-tag>
<v-tag closable>frontend</v-tag>Props
tone variant icon closable removeLabel
<v-progress><v-progress value="70"></v-progress>Props
value max tone size label showValue indeterminate
<v-spinner><v-spinner></v-spinner>Props
size tone label
<v-skeleton><v-skeleton lines="3"></v-skeleton>Props
width height radius lines circle
<v-rating><v-rating value="4"></v-rating>Props
value max size label readonly disabled showValue allowClear
<v-card><v-card title="Plan" subtitle="Monthly">Everything included.</v-card>Props
title subtitle icon padded hoverable
<v-table><div v-data="{
cols: ['Name', 'Role'],
people: [['Ada', 'Engineer'], ['Grace', 'Admiral']]
}">
<v-table :columns="cols" :rows="people"></v-table>
</div>Props
columns rows empty sortable dense striped hover caption
<v-stat><v-stat label="Revenue" value="12,480" trend="up"></v-stat>Props
label value delta hint icon suffix inverted
<v-timeline><div v-data="{ events: ['Opened', 'In review', 'Merged'] }">
<v-timeline :items="events"></v-timeline>
</div>Props
items
<v-divider><v-divider></v-divider>Props
label vertical spacing
<v-empty-state><v-empty-state title="Nothing here yet" text="Add your first item."></v-empty-state>Props
icon title description
<v-code-block><v-code-block code="<div v-data="{ n: 0 }">"></v-code-block>Props
code language filename copyLabel copiedLabel wrap
<v-avatar><v-avatar name="Ada Lovelace"></v-avatar>Props
name src alt size shape status