2015-07-02 14:17:35 +03:00
# Button
2015-10-31 05:39:30 +03:00
A [button ](https://www.google.com/design/spec/components/buttons.html ) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’ s color theme.
2015-10-29 09:42:14 +03:00
2015-10-31 01:03:00 +03:00
<!-- example -->
2015-10-31 21:44:51 +03:00
```jsx
2015-10-31 05:39:30 +03:00
import Button from 'react-toolbox/button';
const TestButtons = () => (
< div >
< Button label = "Flat button" / >
< Button kind = "raised" label = "Raised" / >
< Button kind = "raised" label = "Raised accent" accent icon = "favorite" / >
< Button className = "primary" kind = "floating" icon = "add" / >
< Button mini kind = "floating" icon = "add" accent / >
< / div >
);
2015-07-02 14:17:35 +03:00
```
## Properties
2015-10-31 05:39:30 +03:00
| Name | Type | Default | Description|
2015-10-31 23:44:03 +03:00
|:- |:-: |:- |:-|
2015-10-31 05:39:30 +03:00
| accent | `Bool` | `false` | Indicates if the button should have accent color.|
| className | `String` | `''` | Set a class to style the Component.|
| disabled | `Boolean` | `false` | If true, component will be disabled.|
| icon | `String` | | Value of the icon (See icon component). |
| kind | `String` | `flat` | Type of the component, overwrite this property if you need set a different stylesheet.|
| label | `String` | | The text string to use for the name of the button.|
| loading | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
| mini | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
| onClick | `Function` | | Callback called when the button is clicked.|
| primary | `false` | | If true, component will have the primary color.|
| ripple | `Boolean` | `true` | If true, component will have a ripple effect on click.|
2015-10-31 15:37:28 +03:00
Also, any additional properties will be directly transferred to the `button` tag.