2018-05-16 20:57:22 +08:00
---
title: Button
2019-01-29 16:31:24 +08:00
preview: https://didi.github.io/mand-mobile/examples/#/button
2018-05-16 20:57:22 +08:00
---
2018-05-28 19:54:35 +08:00
Button components for configuring different button styles
2018-05-16 20:57:22 +08:00
### Import
```javascript
import { Button } from 'mand-mobile'
Vue.component(Button.name, Button)
```
### Code Examples
<!-- DEMO -->
### API
#### Button Props
|Props | Description | Type | Default | Note |
|----|-----|------|------ |------|
2018-11-25 10:40:18 +08:00
|type|theme type|String|`default`|`default`, `primary` , `warning` , `disabled` , `link` |
2018-11-11 12:17:35 +08:00
|native-type|button type|String|`button`|-|
2018-08-09 11:04:04 +08:00
|size|-|String|`large`|`large/small`|
2018-08-07 19:43:20 +08:00
|plain|-|Boolean|`false`|-|
|round|-|Boolean|`false`|-|
2018-08-29 14:47:54 +08:00
|inline|-|Boolean|`false`|-|
2018-08-07 19:43:20 +08:00
|icon|-|String|-|refer to `Icon` for optional values|
2018-11-25 10:40:18 +08:00
|icon-svg|use svg icon|Boolean|`false`|-|
2019-07-29 10:41:37 +08:00
|inactive|-|Boolean|`false`|The button is not clickable which is inactive or disabled. The former is generally used for subjective factors such as invalid form validation, and the latter is used for objective factors such as no permission or no inventory|
|loading|loading state|Boolean|`false`|-|
2018-05-16 20:57:22 +08:00
#### Button Events
##### @click(event)
Button click event