- Ant Design of Vue
- Getting Started
- Use in vue-cli
- Customize Theme
- Change Log
- Internationalization
- Components(51)
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Button
To trigger an operation.
When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
Examples
Type #
There are primary button, default button, dashed button and danger button in antd.
<template>
<div>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
</div>
</template>
Basic
With Icon
Button Group #
Buttons can be grouped by placing multiple Button components into a Button.Group.
The size can be set to large, small or left unset resulting in a default size.
<template>
<div id="components-button-demo-button-group">
<h4>Basic</h4>
<a-button-group>
<a-button>Cancel</a-button>
<a-button type="primary">OK</a-button>
</a-button-group>
<a-button-group>
<a-button disabled>L</a-button>
<a-button disabled>M</a-button>
<a-button disabled>R</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary">L</a-button>
<a-button>M</a-button>
<a-button>M</a-button>
<a-button type="dashed">R</a-button>
</a-button-group>
<h4>With Icon</h4>
<a-button-group>
<a-button type="primary">
<a-icon type="left" />Go back
</a-button>
<a-button type="primary">
Go forward<a-icon type="right" />
</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary" icon="cloud" />
<a-button type="primary" icon="cloud-download" />
</a-button-group>
</div>
</template>
<style>
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style>
Disabled #
To mark a button as disabled, add the disabled property to the Button.
<template>
<div>
<a-button type="primary">Primary</a-button>
<a-button type="primary" disabled>Primary(disabled)</a-button>
<br />
<a-button>Default</a-button>
<a-button disabled>Default(disabled)</a-button>
<br />
<a-button>Ghost</a-button>
<a-button disabled>Ghost(disabled)</a-button>
<br />
<a-button type="dashed">Dashed</a-button>
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
</div>
</template>
Ghost Button #
ghost property will make button's background transparent, it is common used in colored background.
<template>
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
<a-button type="primary" ghost>Primary</a-button>
<a-button ghost>Default</a-button>
<a-button type="dashed" ghost>Dashed</a-button>
<a-button type="danger" ghost>danger</a-button>
</div>
</template>
Icon #
Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.
<template>
<div>
<a-button type="primary" shape="circle" icon="search"></a-button>
<a-button type="primary" icon="search">Search</a-button>
<a-button shape="circle" icon="search" />
<a-button icon="search">Search</a-button>
<a-button shape="circle" icon="search" />
<a-button icon="search">Search</a-button>
<a-button type="dashed" shape="circle" icon="search" />
<a-button type="dashed" icon="search">Search</a-button>
</div>
</template>
Loading #
A loading indicator can be added to a button by setting the loading property on the Button.
<template>
<div>
<a-button type="primary" loading>
Loading
</a-button>
<a-button type="primary" size="small" loading>
Loading
</a-button>
<br />
<a-button type="primary" :loading="loading" @mouseenter="enterLoading">
mouseenter me!
</a-button>
<a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
延迟1s
</a-button>
<br />
<a-button shape="circle" loading />
<a-button type="primary" shape="circle" loading />
</div>
</template>
<script>
export default {
data () {
return {
loading: false,
iconLoading: false,
}
},
methods: {
enterLoading () {
this.loading = true
},
enterIconLoading () {
this.iconLoading = { delay: 1000 }
},
},
}
</script>
Multiple Buttons #
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button.
<template>
<div>
<a-button type="primary">Primary</a-button>
<a-button>secondary</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1">1st item</a-menu-item>
<a-menu-item key="2">2nd item</a-menu-item>
<a-menu-item key="3">3rd item</a-menu-item>
</a-menu>
<a-button>
Actions <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
</template>
<script>
export default {
methods: {
handleMenuClick(e) {
console.log('click', e);
}
}
}
</script>
Size #
Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.
<template>
<div>
<a-radio-group :value="size" @change="handleSizeChange">
<a-radio-button value="large">Large</a-radio-button>
<a-radio-button value="default">Default</a-radio-button>
<a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
<br /><br />
<a-button type="primary" :size="size">Primary</a-button>
<a-button :size="size">Normal</a-button>
<a-button type="dashed" :size="size">Dashed</a-button>
<a-button type="danger" :size="size">Danger</a-button>
<br />
<a-button type="primary" shape="circle" icon="download" :size="size" />
<a-button type="primary" icon="download" :size="size">Download</a-button>
<br />
<a-button-group :size="size">
<a-button type="primary">
<a-icon type="left" />Backward
</a-button>
<a-button type="primary">
Forward<a-icon type="right" />
</a-button>
</a-button-group>
</div>
</template>
<script>
export default {
data () {
return {
size: 'large',
}
},
methods: {
handleSizeChange (e) {
this.size = e.target.value
},
},
}
</script>
API #
To get a customized button, just set type/shape/size/loading/disabled.
| Property | Description | Type | Default |
|---|---|---|---|
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
| htmlType | set the original html type of button, see: MDN | string | button |
| icon | set the icon of button, see: Icon component | string | - |
| loading | set the loading status of button | boolean | { delay: number } | false |
| shape | can be set to circle or omitted | string | - |
| size | can be set to small large or omitted | string | default |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | default |
| onClick | set the handler to handle click event | function | - |
events #
| Events Name | Description | Arguments |
|---|---|---|
| click | handle click event | function(e) |
<Button>Hello world!</Button> will be rendered into <button><span>Hello world!</span></button>, and all the properties which are not listed above will be transferred to the <button> tag.