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-11-10 13:07:43 +03:00
import Button from 'react-toolbox/lib/button';
2015-10-31 05:39:30 +03:00
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:55:12 +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.|