Buttons

The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

Colors

The color prop is used to change the background color of the button.

Outlined

The outlined variant option is used to create outlined buttons.

Elevated

The elevated variant option is used to create shadow buttons.

Rounded

Use the rounded prop to control the border radius of buttons.

Text

Use text variant option to create text button. Text buttons have no box shadow and no background.

Plain

Use plain variant option to a create a plain button. Plain buttons have a lower baseline opacity that reacts to hover and focus.

Tonal

Use tonal variant option to a create a light background button.

Icon

Icons can be used inside of buttons to add emphasis to the action.

Icon Only

Use v-icon component inside button to create buttons that looks like rest of the theme.

Sizes

Fancy larger or smaller buttons? Add size="x-large" or size="small" prop for additional sizes.

Block buttons

The block prop allows buttons to extend the full available width.

Loaders

Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a v-progress-circular component but this can be customized.

Router

Use to prop to create button with router support.

String Literal Object Path With Query

Group

Wrap buttons with the v-btn-toggle component to create a group button. You can add a visual divider between buttons with the divided prop.

CONTENTS

  • Introduction

  • Colors

  • Outlined

  • Elevated

  • Rounded

  • Text

  • Plain

  • Tonal

  • Icon

  • Icon Only

  • Size

  • Button Block

  • Loaders

  • Router

  • Link

  • Toggle