Homecomponentsaction

IconButton

An icon-only control that initiates an action.

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

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.
IconComponent
iconColor
Color of the icon.
ConditionalStyle<Values<{ red5: CSSVarFunction; blue0: CSSVarFunction; blue4: CSSVarFunction; blue1: CSSVarFunction; blue2: CSSVarFunction; ... 131 more ...; transparent: string; }, { ...; }>>
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
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
Size
Ghost
Bleed
API