react-toolbox/components/button/readme.md

35 lines
1.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# Button
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 apps color theme.
<!-- example -->
```jsx
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>
);
```
## Properties
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `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.|