Homecomponentsaction

IconButton

An icon-only control that initiates an action.

Use IconButton to create a button with only an icon as its content.

Icon Element

You can also provide an <Icons.Name /> component as the icon property. This can be useful if you plan to animate the icon.

Size

Use the size property to set the size of the icon.

Ghost

Use ghost to create a button with no background or border.

Bleed

Use bleed to bleed the button area out for alignment.

New Service

Open in Playroom

API

icon
Required
The icon to display.
"Menu" | "Icon" | "Add" | "Anxious" | "Apple" | "AppointmentAccept" | "AppointmentDecline" | "Appointments" | "Archive" | "ArchiveFilled" | "Attach" | "AveragePro" | "TopPro" | ... 179 more ... | Element
tabIndex
The tab index of the button element.
number
onClick
The action to perform when the button is clicked.
MouseEventHandler<HTMLButtonElement>
label
The label for the button.
string
disabled
Mute the button and prevent any interaction.
true
false
bleed
Bleed the button to align the visible content when ghost.
true
false
size
small
medium
large
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
Icon Element
Size
Ghost
Bleed
API