Button

Commonly used action buttons.

Basic Usage

Button types include primary, info, success, warning, and error.

<template>
  <div class="demo-button">
    <b-button>Default</b-button>
    <b-button type="primary">Primary</b-button>
    <b-button type="success">Success</b-button>
    <b-button type="info">Info</b-button>
    <b-button type="warning">Warning</b-button>
    <b-button type="danger">Danger</b-button>
  </div>
</template>

Plain Button

Set plain to display a plain button.

<template>
  <div class="demo-button">
    <b-button plain>Default</b-button>
    <b-button type="primary" plain>Primary</b-button>
    <b-button type="success" plain>Success</b-button>
    <b-button type="info" plain>Info</b-button>
    <b-button type="warning" plain>Warning</b-button>
    <b-button type="danger" plain>Danger</b-button>
  </div>
</template>

Round Button

Set round to display a round button.

<template>
  <div class="demo-button">
    <b-button round>Default</b-button>
    <b-button type="primary" round>Primary</b-button>
    <b-button type="success" round>Success</b-button>
    <b-button type="info" round>Info</b-button>
    <b-button type="warning" round>Warning</b-button>
    <b-button type="danger" round>Danger</b-button>
  </div>
</template>

Dashed Button

Set dashed to display a dashed button.

<template>
  <div class="demo-button">
    <b-button dashed>Default</b-button>
    <b-button type="primary" dashed>Primary</b-button>
    <b-button type="success" dashed>Success</b-button>
    <b-button type="info" dashed>Info</b-button>
    <b-button type="warning" dashed>Warning</b-button>
    <b-button type="danger" dashed>Danger</b-button>
  </div>
</template>

Ghost Button

Set transparent to enable transparent background ghost mode, useful for areas with background colors.

<template>
  <div class="demo-button" style="background: #cad4d4; padding: 10px 6px">
    <b-button type="primary" transparent size="small">Primary</b-button>
    <b-button type="success" transparent size="small">Success</b-button>
    <b-button type="info" transparent size="small">Info</b-button>
    <b-button type="warning" transparent size="small">Warning</b-button>
    <b-button type="danger" transparent size="small">Danger</b-button>
  </div>
</template>

Button with Icon

Use the icon prop to add an icon to the button.

<template>
  <div class="demo-button">
    <b-button icon="search">search</b-button>
    <b-button icon="plus-circle">create</b-button>
    <b-button icon="check-circle" type="primary">check</b-button>
    <b-button icon="delete" type="danger">delete</b-button>
    <b-button icon="minus-circle"></b-button>
    <b-button icon="crown"></b-button>
    <b-button icon="crown" circle type="primary"></b-button>
    <b-button icon="crown" circle type="primary" plain></b-button>
  </div>
</template>

Disabled State

Use disabled to set the button to a disabled state.

<template>
  <div class="demo-button" flex="cross:center">
    <b-button disabled>Default</b-button>
    <b-button dashed disabled>Dashed</b-button>
    <b-button background disabled>Background</b-button>
    <b-button type="primary" disabled>Primary</b-button>
    <b-button type="success" disabled>Success</b-button>
    <b-button type="info" disabled>Info</b-button>
    <b-button type="warning" disabled>Warning</b-button>
    <b-button type="danger" disabled>Danger</b-button>
  </div>
</template>

Text Button

Use type="text" for a text-only button.

<template>
  <div class="demo-button">
    <div>
      <b-button type="text">文字button</b-button>
      <b-button type="text" text-color="primary">Primary</b-button>
      <b-button type="text" text-color="success">Success</b-button>
      <b-button type="text" text-color="info">Info</b-button>
      <b-button type="text" text-color="warning">Warning</b-button>
      <b-button type="text" text-color="danger">Danger</b-button>
      <b-button type="text" text-color="#b37feb">多彩button</b-button>
      <b-button type="text" text-color="#f759ab">多彩button2</b-button>
    </div>
    <div>
      <b-button type="text" disabled>Disabledbutton</b-button>
      <b-button type="text" text-color="primary" disabled>Primary</b-button>
      <b-button type="text" text-color="success" disabled>Success</b-button>
      <b-button type="text" text-color="info" disabled>Info</b-button>
      <b-button type="text" text-color="warning" disabled>Warning</b-button>
      <b-button type="text" text-color="danger" disabled>Danger</b-button>
      <b-button type="text" text-color="#b37feb" disabled>多彩button</b-button>
      <b-button type="text" text-color="#f759ab" disabled>多彩button2</b-button>
    </div>
  </div>
</template>

Button Group

Wrap buttons with the button-group component to display them as a button group.

<template>
  <div class="demo-button" flex="cross:center">
    <b-button-group vertical>
      <b-button>小样</b-button>
      <b-button>你</b-button>
      <b-button>瞅啥</b-button>
    </b-button-group>

    <b-button-group vertical>
      <b-button>我就</b-button>
      <b-button>瞅你</b-button>
      <b-button>咋地</b-button>
    </b-button-group>

    <b-button-group>
      <b-button type="primary" icon="left">Prev</b-button>
      <b-button type="primary">
        Next
        <i class="b-iconfont b-icon-right"></i>
      </b-button>
    </b-button-group>
    <b-button-group>
      <b-button>Prev</b-button>
      <b-button>Next</b-button>
    </b-button-group>
    <b-button-group>
      <b-button type="success" icon="star"></b-button>
      <b-button type="info" icon="heatmap"></b-button>
      <b-button type="danger" icon="edit"></b-button>
    </b-button-group>
  </div>
</template>

Sizes

Set size for different sizes.

<template>
  <div class="demo-button">
    <b-button size="large">不小</b-button>
    <b-button>正好</b-button>
    <b-button size="small">小</b-button>
    <b-button size="mini">小Mini</b-button>
  </div>
</template>

Loading State

Set loading for a loading state.

<template>
  <div class="demo-button" flex="cross:center">
    <b-button type="primary" :loading="loading" icon="reload" @click="loading = true">
      Click me!
    </b-button>
    <b-button @click="loading = false">stop</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

Click Feedback

Use the v-waves directive to change the click feedback animation.

<template>
  <div class="demo-button">
    <b-button>Normal Animation</b-button>
    <b-button type="danger">Normal Animation</b-button>
    <b-button v-waves>Waves Animation</b-button>
    <b-button v-waves type="success">Waves Animation</b-button>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
size	Size	String	large / small / mini	—
type	Type	String	primary / success / warning / danger / info / text	—
plain	Plain button	Boolean	—	false
round	Round button	Boolean	—	false
circle	Circle button	Boolean	—	false
transparent	Transparent button	Boolean	—	false
loading	Loading state	Boolean	—	false
disabled	Disabled state	Boolean	—	false
background	Skeuomorphic background (default button only)	Boolean	—	false
icon	Icon	String	—	—
icon-style	Icon size configuration	Object	—	—
text-color	Text button color	String	primary / success / warning / danger / info / text / custom hex	—
autofocus	Auto focus	Boolean	—	false
native-type	Native type attribute	String	button / submit / reset	button