fullWidth prop is set
Button will take 100% of parent width:
rightSection allow adding icons or any other element to the left and right side of the button.
When a section is added, padding on the corresponding side is reduced.
rightSection are flipped in RTL mode
leftSection is displayed on the right and
rightSection is displayed on the left).
justify prop sets
inner element. You can use it to change the alignment of
left and right sections. For example, to spread them across the button set
If you need to align just one section to the side of the button set
and add empty
<span /> to the opposite section.
compact sizes have
the same font-size as
xl but reduced padding and height.
variant prop is set to
gradient, you can control gradient with
gradient prop, it accepts an object with
deg properties. If the
gradient prop is not set,
Button will use
theme.defaultGradient which can be configured on the theme object.
gradient prop is ignored when
variant is not
variant="gradient" supports only linear gradients with two colors. If you need a more complex gradient, then use Styles API to modify
Button disabled, set
disabled prop, this will prevent any interactions with the button
and add disabled styles. If you want the button to just look disabled but still be interactive,
data-disabled prop instead. Note that disabled styles are the same for all variants.
<a /> element does not support
disabled attribute. To make
Button disabled when it is
rendered as a link, set
data-disabled attribute instead and prevent default behavior in
onClick event handler.
To customize disabled styles, it is recommended to use both
&:disabledis used to style the button when
disabledprop is set and also when the button is disabled by the parent component (for example, when
disabledprop is set on a
<fieldset />element which contains
&[data-disabled]is used to style the button when it is not actually disabled but should look like it is (for example,
data-disabledshould be used if you need to use Tooltip with disabled
Buttonis used as a link)
onMouseLeave event is not triggered when
Button is disabled, so if you need to use
Tooltip with disabled
Button you need to set
data-disabled prop on
disabled. Note that it is also required to change
onClick event handler to
(event) => event.preventDefault() as
Button is not actually disabled and will still trigger
Component Styles API
Hover over selectors to highlight corresponding elements
You can customize colors for
Button and other components variants by adding
variantColorResolver to your theme.
Note that you must not wrap child
Button components with any additional elements:
Button is a polymorphic component – its default root element is
button, but it can be changed to any other element or component with
You can also use components in
component prop, for example, Next.js
Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,
ButtonPropsdoes not extend
buttonis the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support
componentprop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use
createPolymorphicComponentfunction described in this guide.