2019-11-20 06:06:30 +00:00
|
|
|
# Button
|
2019-05-20 10:30:11 +00:00
|
|
|
|
2019-06-28 08:36:06 +00:00
|
|
|
Button is used for a action on a page.
|
2019-05-20 10:30:11 +00:00
|
|
|
|
2019-11-20 06:06:30 +00:00
|
|
|
### Usage
|
2019-05-20 10:30:11 +00:00
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import Button from "@appserver/components/button";
|
2019-05-20 10:30:11 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-20 06:06:30 +00:00
|
|
|
```jsx
|
|
|
|
|
<Button
|
|
|
|
|
size="base"
|
|
|
|
|
isDisabled={false}
|
|
|
|
|
onClick={() => alert("Button clicked")}
|
|
|
|
|
label="OK"
|
|
|
|
|
/>
|
|
|
|
|
```
|
2019-06-28 08:36:06 +00:00
|
|
|
|
2019-11-20 06:06:30 +00:00
|
|
|
### Properties
|
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------------ | :------------: | :------: | :------------------------------: | :-----: | ----------------------------------------------------- |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `icon` | `node` | - | - | `null` | Icon node element |
|
|
|
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
|
|
|
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
|
|
|
|
|
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
|
|
|
|
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
|
|
|
|
|
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
|
|
|
|
|
| `label` | `string` | - | - | - | Button text |
|
|
|
|
|
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
|
|
|
|
|
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
|
|
|
|
|
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
|
2020-07-15 16:00:36 +00:00
|
|
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `large` | `base` | Size of button |
|
2020-10-16 13:16:01 +00:00
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
|
|
|
|
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
|
|
|
|
|
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |
|
