Homecomponentsaction

Button

A control that initiates an action.

Create Buttons that perform an action when clicked.

Open in Playroom

Variants

Use the variant property to change the appearance of the button.

Open in Playroom

Brand Variants

Open in Playroom

Ghost Buttons

Use ghost to remove the background and borders from the buttons.

Open in Playroom

Bleeding Ghost Buttons For Alignment

Ghost buttons have an invisible spacing around them that would not align flush with other elements. In such cases you can use bleedH to remove the spacing horizontally and bleedV to remove the spacing on the top and bottom. You can use bleed as a shorthand for both directions.

This has no impact on non-ghost variants.

Open in Playroom

Sizes

Use size to set the size of the button.

Small

Medium

Large

Open in Playroom

Full Width

Use fullWidth to make the button fill the width of its container. This property accepts responsive values.

Open in Playroom

Icons

Use startIcon or endIcon to add an icon to either side of the button.

Before label

After label

Open in Playroom

Disabled

Use disabled property to disable the button.

Open in Playroom

Working

Use the working property to provide feedback when doing an operation in response to being pressed.

Open in Playroom

Dark Background

Use onColor as variant when button is placed over a colored background. The property ghost has no effect when onColor is used.

Open in Playroom

Examples

Inline Forms

TODO: Need input components.

Dialog Buttons

TODO: Need dialog component.

Card Actions

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Open in Playroom

API

id

The HTML id of the button element.

string

type

The HTML type of button element.

button

reset

submit

onClick

The action to perform when the button is clicked.

MouseEventHandler<HTMLButtonElement>

tabIndex

The tab index of the button element.

number

startIcon

Icon to show before the label.

IconComponent

endIcon

Icon to show after the label.

IconComponent

bleedH

Bleed the button horizontally. Works only when ghost.

true

false

bleedV

Bleed the button vertically. Works only when ghost.

true

false

bleed

Shorthand for bleedH and bleedV.

true

false

disabled

Mute the button and prevent any interaction.

true

false

working

Show a loader to provide feedback.

true

false

fullWidth

Make the button fill the width of its container.

ResponsiveValue<boolean>

children

The label of the button.

ReactNode

size

medium

large

small

variant

primary

secondary

caution

onColor

apple

facebook

google

instagram

linkedin

paypal

stripe

twitter

ghost

true

false

data

An object with the data keys and values.

DataAttributeMap

ref

Ref<HTMLButtonElement>

key

Key | null

Table of Contents

Bleeding Ghost Buttons For Alignment

Dark Background