Button

Button Component is use to render a button in the user interface, that can perform tasks when clicked

Appearance

The Palette Button component has two appearance

• primary
• secondary
• tertiary
• link

Example

Code

<Button onClick={() => alert("hello")}>Primary Button</Button>

<Button appearance="secondary" onClick={() => alert("hello")}>

Secondary Button

</Button>

<Button appearance="tertiary" onClick={() => alert("hello")}>

Tertiary Button

</Button>

<Button

appearance="link"

onClick={() => window.open("https://www.google.com/")}

>

Link Button

</Button>

Size

Since the Button component renders the children as it is, the height is determined by the children.

Code

<Button>

<div

style={{

height: "50px",

display: "flex",

alignItems: "center",

fontSize: "16px",

}}

>

Large Button

</div>

</Button>

Color

The Palette Button component has type prop which is used as the background color or the text color depending on the appearance prop.

There are five color types,

• default
• success
• info
• warning
• danger

The following is the way in which the type is applied

• appearance - primary then type - background-color
• appearance - secondary then type - text color
• appearance - tertiary then type - text color
• appearance - link then does not apply

Primary Appearance

Secondary Appearance

Tertiary Appearance

Code

<Button type="success">Success</Button>

<Button type="info">Info</Button>

<Button type="warning">Warning</Button>

<Button type="danger">Danger</Button>

<Button type="default">Default</Button>

The above code is only for appearance "primary", the same applies to other two appearance - "secondary" & "tertiary"

Icon buttons

Since the child of the Button component is rendered as it is when can render icons easily

Code

<Button>

<FontAwesomeIcon icon={faRocket} />

Send

</Button>

Disabled button

The disabled prop is used to render a disabled button in the user interface

Code

<Button disabled>Disabled Button</Button>

<Button disabled appearance="secondary">Disabled Button</Button>

API

Prop	Type	Possible values	Default Value
appearance	string	"primary","secondary","tertiary" and "link"	"primary"
type	string	"default", "success", "info", "danger" and "warning"	default
disabled	boolean	true and false	false
onClick	()=>void	-	-

Built by Akshay 🤙