Button

this is a button

Basic usage

define button theme color by theme

<template>
  <v-space wrap>
    <v-button>Default</v-button>
    <v-button theme="primary">
      Primary
    </v-button>
    <v-button theme="success">
      Success
    </v-button>
    <v-button theme="error">
      Error
    </v-button>
    <v-button theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

text button

Use text to define text buttons (low emphasis). Text buttons are usually used for less important actions

<template>
  <v-space wrap>
    <v-button text>
      Default
    </v-button>
    <v-button text theme="primary">
      Primary
    </v-button>
    <v-button text theme="success">
      Success
    </v-button>
    <v-button text theme="error">
      Error
    </v-button>
    <v-button text theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

border button

Use outlined to define outlined buttons (middle emphasis). More emphasis than text buttons because of the outline.

<template>
  <v-space wrap>
    <v-button outlined>
      Default
    </v-button>
    <v-button outlined theme="primary">
      Primary
    </v-button>
    <v-button outlined theme="success">
      Success
    </v-button>
    <v-button outlined theme="error">
      Error
    </v-button>
    <v-button outlined theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

Resize

Use size to adjust the button size, you can use small, medium, large three values

<template>
  <v-space wrap>
    <v-button size="small" theme="primary">
      Small
    </v-button>
    <v-button size="medium" theme="primary">
      Medium
    </v-button>
    <v-button size="large" theme="primary">
      Large
    </v-button>
  </v-space>
</template>

round button

Use round to define a round button.

<template>
  <v-space wrap>
    <v-button round>
      Default
    </v-button>
    <v-button round theme="primary">
      Primary
    </v-button>
    <v-button round theme="success">
      Success
    </v-button>
    <v-button round theme="error">
      Error
    </v-button>
    <v-button round theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

raised button

Use raised to define raised buttons.

<template>
  <v-space wrap>
    <v-button raised>
      Default
    </v-button>
    <v-button raised theme="primary">
      Primary
    </v-button>
    <v-button raised theme="success">
      Success
    </v-button>
    <v-button raised theme="error">
      Error
    </v-button>
    <v-button raised theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

disabled state

Disable button with disabled.

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-button disabled>
        Default
      </v-button>
      <v-button disabled theme="primary">
        Primary
      </v-button>
      <v-button disabled theme="success">
        Success
      </v-button>
      <v-button disabled theme="error">
        Error
      </v-button>
      <v-button disabled theme="warning">
        Warning
      </v-button>
    </v-space>
  </v-space>
</template>

API

button property

property name	description	type	default value
theme	theme color	enum	default
size	button size	enum	medium
round	Whether it is a round button	boolean	false
disabled	whether it is disabled	boolean	false
text	Whether it is a text button	boolean	false
outlined	whether it is a border button	boolean	false
raised	whether the button is raised	boolean	false

button slot

Slot Name	Description
default	default slot