Button

Last Update : 14 August, 2023 | Published : 01 July, 2023 | 2 Min Read

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

Looking for Cloud-Native Implementation?

Finding the right talent is pain. More so, keeping up with concepts, culture, technology and tools. We all have been there. Our AI-based automated solutions helps eliminate these issues, making your teams lives easy.