VBtn

The VBtn component is a versatile button that supports multiple variants, sizes, and states. It can be used as a regular button, link, or router link with icon support.

Basic Usage

<template>
  <VBtn>Click Me</VBtn>
</template>

Variants

<VBtn variant="elevated">Elevated Button</VBtn>

Default variant with elevation shadow.

<VBtn variant="flat">Flat Button</VBtn>

Button with solid background, no elevation.

<VBtn variant="outlined">Outlined Button</VBtn>

Button with border and transparent background.

<VBtn variant="text">Text Button</VBtn>

Button with no background or border.

<VBtn variant="tonal">Tonal Button</VBtn>

Button with tinted background.

<VBtn variant="plain">Plain Button</VBtn>

Minimal styling button.

Icon Buttons

<template>
  <!-- Icon only button -->
  <VBtn icon="mdi-heart" />
  
  <!-- Button with prepend icon -->
  <VBtn prepend-icon="mdi-heart">Like</VBtn>
  
  <!-- Button with append icon -->
  <VBtn append-icon="mdi-arrow-right">Next</VBtn>
</template>

Sizes

<template>
  <VBtn size="x-small">X-Small</VBtn>
  <VBtn size="small">Small</VBtn>
  <VBtn size="default">Default</VBtn>
  <VBtn size="large">Large</VBtn>
  <VBtn size="x-large">X-Large</VBtn>
</template>

Loading State

<template>
  <VBtn :loading="true">Loading...</VBtn>
  <VBtn loading="primary">Custom Color Loader</VBtn>
</template>

Block Button

<template>
  <VBtn block>Full Width Button</VBtn>
</template>

Router Integration

<template>
  <VBtn to="/about">Go to About</VBtn>
  <VBtn href="https://example.com">External Link</VBtn>
</template>

Props

variant

string

default:"elevated"

The visual style variant. Options: elevated, flat, outlined, text, tonal, plain

color

string

The button color (supports theme colors)

baseColor

string

The base color when button is not active

activeColor

string

The color when button is active

size

string

default:"default"

Button size. Options: x-small, small, default, large, x-large

icon

boolean | string | IconValue

Makes button an icon button or specifies the icon to display

prependIcon

IconValue

Icon to display before button text

appendIcon

IconValue

Icon to display after button text

block

boolean

default:"false"

Expands button to 100% of available width

boolean | string

default:"false"

Shows loading indicator. Can specify color as string

disabled

boolean

default:"false"

Disables the button

readonly

boolean

default:"false"

Makes button readonly (visual only, prevents interaction)

active

boolean

Forces button active state

flat

boolean

default:"false"

Removes button elevation

slim

boolean

default:"false"

Reduces horizontal padding

stacked

boolean

default:"false"

Stacks icon and text vertically

spaced

'start' | 'end' | 'both'

Adds spacing on specified side(s)

ripple

boolean | object

default:"true"

Enables/configures ripple effect

text

string | number | boolean

Text content to display in button

string | object

Vue Router route location

href

string

External link URL

tag

string

default:"button"

HTML tag to use for root element

density

string

Adjusts vertical spacing. Options: default, comfortable, compact

elevation

string | number

Elevation level (0-24)

rounded

string | number | boolean

Border radius. Options: 0, xs, sm, md, lg, xl, pill, circle, or number

border

boolean | string | number

Adds border. Can specify width or side

height

string | number

Sets height of button

width

string | number

Sets width of button

minWidth

string | number

Sets minimum width

maxWidth

string | number

Sets maximum width

minHeight

string | number

Sets minimum height

maxHeight

string | number

Sets maximum height

position

string

CSS position. Options: static, relative, fixed, absolute, sticky

location

string

Position on screen (when using fixed/absolute)

theme

string

Theme to apply to component

value

any

Value used when button is in a button group

Slots

default

slot

Button content

prepend

slot

Content to prepend before button text

append

slot

Content to append after button text

loader

slot

Custom loading indicator content

Events

group:selected

event

Emitted when button is selected in a groupPayload: { value: boolean }

Examples

Colors

<template>
  <VBtn color="primary">Primary</VBtn>
  <VBtn color="secondary">Secondary</VBtn>
  <VBtn color="success">Success</VBtn>
  <VBtn color="error">Error</VBtn>
  <VBtn color="warning">Warning</VBtn>
  <VBtn color="info">Info</VBtn>
</template>

Rounded

<template>
  <VBtn rounded="0">No Rounding</VBtn>
  <VBtn rounded="sm">Small</VBtn>
  <VBtn rounded="lg">Large</VBtn>
  <VBtn rounded="pill">Pill</VBtn>
</template>

Density

<template>
  <VBtn density="default">Default</VBtn>
  <VBtn density="comfortable">Comfortable</VBtn>
  <VBtn density="compact">Compact</VBtn>
</template>

Stacked Icon Button

<template>
  <VBtn stacked prepend-icon="mdi-download">
    Download
  </VBtn>
</template>

Layout

Form Inputs

Buttons & Controls

Data Display

Navigation

Feedback

Pickers

Media

Labs (Experimental)

VBtn

VBtn

Basic Usage

Variants

Icon Buttons

Sizes

Loading State

Block Button

Router Integration

Props

Slots

Events

Examples

Colors

Rounded

Density

Stacked Icon Button

Build docs developers (and LLMs) love

Layout

Form Inputs

Buttons & Controls

Data Display

Navigation

Feedback

Pickers

Media

Labs (Experimental)

​VBtn

​Basic Usage

​Variants

​Icon Buttons

​Sizes

​Loading State

​Block Button

​Router Integration

​Props

​Slots

​Events

​Examples

​Colors

​Rounded

​Density

​Stacked Icon Button

Build docs developers (and LLMs) love

VBtn

Basic Usage

Variants

Icon Buttons

Sizes

Loading State

Block Button

Router Integration

Props

Slots

Events

Examples

Colors

Rounded

Density

Stacked Icon Button