Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<script setup>
import { CbButton as Button } from '@ptpchips/carbon-ui'
</script>
<template>
  <div class="button-box">
    <Button> hello </Button>
    <Button loading> Loading </Button>
  </div>
  <div class="button-box">
    <Button type="primary"> Primary </Button>
    <Button type="success"> Success </Button>
    <Button type="warning"> Warning </Button>
    <Button type="danger"> Danger </Button>
    <Button type="info"> Info </Button>
  </div>
  <div class="button-box">
    <Button plain type="primary"> Primary </Button>
    <Button plain type="success"> Success </Button>
    <Button plain type="warning"> Warning </Button>
    <Button plain type="danger"> Danger </Button>
    <Button plain type="info"> Info </Button>
  </div>
</template>

<style scoped>
.button-box:not(:last-child) {
  margin-bottom: 12px;
}
</style>

Button Attributes

Name	Description	Type	Default
size	button size	enum - 'large'| 'small'	—
type	button type	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	determine whether it's a plain button	boolean	false
round	determine whether it's a round button	boolean	false
circle	determine whether it's a circle button	boolean	false
loading	determine whether it's loading	boolean	false
disabled	disable the button	boolean	false
icon	icon component	string	—
autofocus	same as native button's autofocus	boolean	false
native-type	same as native button's type	enum - 'button'| 'submit'| 'reset'	button