2018-05-16 20:57:22 +08:00
---
title: Button
preview: https://didi.github.io/mand-mobile/examples/#/button
---
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-08-07 19:43:20 +08:00
|type|-|String|`default`|`default/primary/warning/disabled/link`|
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-10-15 15:52:00 +08:00
|icon-svg|use svg icon|Boolean|false|-|
2018-08-07 19:43:20 +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.|
2018-05-16 20:57:22 +08:00
#### Button Events
##### @click(event)
Button click event