Buttons - To allow users to make choices, take actions with a single click. Buttons are usually used in:
- Forms
- Tables
- Cards
- Toolbars
Import
import Button from '@intelops/intelops_ui/packages/react/components/Button/src';
Create a Button
<Button
variant="gradient"
className="mybutton"
size="medium"
color="orange"
onClick={handleButtonClick}>
Button Name
</Button>
Props
| Name | Type | Description |
|---|---|---|
| id | string | Unique to each element can be used to lookup an element getElementById( ) |
| children | node | Components content |
| className | text | To add new or to override the applied styles |
| type | text | the type of button - can be given custom names and be used for grouping and styling |
| variant | text | The type of variant to use (all available button types in the table below) |
| href | string | URL link to the page when you click the button |
| onClick | function | To handle clicks - applied to the DOM element |
| color | string | To change buttons color |
Variant Types (Available button types)
The button come in different styles, colors and sizes.
Button Style
| Variant | Description |
|---|---|
| contained | basic button with a single colored background |
| gradient | button with a gradient of 2 colors |
| outlined | button with a outline but no backgorund color |
| text | button with colored text but no outline or background |
| setIcon | button with an icon instead of text |
Button Color
Each button has 8 colors to choose from:
- fushia
- slate
- lime
- red
- orange
- cyan
- gray
- darkGray
Button Sizes
3 size options:
- small
- medium
- large
