29 components, already in the box

<v-button variant="primary">Save</v-button>
<v-button variant="ghost">Cancel</v-button>
<v-button variant="primary" loading>Sending</v-button>

variant size icon iconRight type loading disabled block rounded ariaLabel

<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>

icon label variant size type disabled loading rounded

<v-tooltip-button tip="Copies to the clipboard">Copy</v-tooltip-button>

tooltip placement variant size icon type disabled ariaLabel

<v-input label="Email" type="email" placeholder="you@example.com"></v-input>

label type placeholder hint error value name id icon suffix size autocomplete inputmode maxlength min max step required disabled readonly clearable

<v-textarea label="Notes" rows="3"></v-textarea>

label placeholder hint error value name id rows maxlength size resize required disabled readonly counter

<div v-data="{ countries: ['Brazil', 'Portugal', 'Japan'] }">
  <v-select label="Country" :options="countries"></v-select>
</div>

label placeholder searchPlaceholder emptyText options value hint error name id size multiple searchable clearable disabled required

<v-checkbox label="Remember me"></v-checkbox>

label description error name id value checked disabled required

<v-radio name="plan" label="Monthly"></v-radio>

label description error name id value checked disabled required

<v-switch label="Notifications"></v-switch>

label description name id size checked disabled

<v-field label="Name" hint="As it appears on your card"></v-field>

label hint error for required disabled

<v-label for="email">Email</v-label>

for size required

<v-alert tone="info" title="Heads up">The library starts itself.</v-alert>

tone title icon closable closeLabel

<v-badge tone="success">Active</v-badge>
<v-badge tone="danger">Overdue</v-badge>

tone variant size icon dot

<v-tag>design</v-tag>
<v-tag closable>frontend</v-tag>

tone variant icon closable removeLabel

<v-progress value="70"></v-progress>

value max tone size label showValue indeterminate

<v-spinner></v-spinner>

size tone label

<v-skeleton lines="3"></v-skeleton>

width height radius lines circle

<v-rating value="4"></v-rating>

value max size label readonly disabled showValue allowClear

<v-card title="Plan" subtitle="Monthly">Everything included.</v-card>

title subtitle icon padded hoverable

<div v-data="{
  cols: ['Name', 'Role'],
  people: [['Ada', 'Engineer'], ['Grace', 'Admiral']]
}">
  <v-table :columns="cols" :rows="people"></v-table>
</div>

columns rows empty sortable dense striped hover caption

<v-stat label="Revenue" value="R$ 12.480" trend="up"></v-stat>

label value delta hint icon suffix inverted

<div v-data="{ events: ['Opened', 'In review', 'Merged'] }">
  <v-timeline :items="events"></v-timeline>
</div>

items

<v-divider></v-divider>

label vertical spacing

<v-empty-state title="Nothing here yet" text="Add your first item."></v-empty-state>

icon title description

<v-code-block code="&lt;div v-data=&quot;{ n: 0 }&quot;&gt;"></v-code-block>

code language filename copyLabel copiedLabel wrap

<v-avatar name="Ada Lovelace"></v-avatar>

name src alt size shape status

<div v-data="{ trail: ['Home', 'Docs', 'Components'] }">
  <v-breadcrumb :items="trail"></v-breadcrumb>
</div>

items separator ariaLabel

<v-pagination pages="8" value="3"></v-pagination>

page pages total perPage siblings previousLabel nextLabel ariaLabel

<div v-data="{ stages: ['Cart', 'Address', 'Payment'] }">
  <v-steps :items="stages" value="1"></v-steps>
</div>

steps current vertical ariaLabel