A Button triggers an action or an event.
The Button component has an
appearance property with 3 available values:
In addition to the
appearance — a Button can also have a
intent property can be
Buttons support disabled states to indicate that a user can not take an action on a particular CTA. It intentionally prevents
pointer-events from happening on the element.
Buttons also support an
isLoading property, which shows a loading indicator, while disabling the button, as well.
intent property works with any
By default buttons and controls have a height of 32px based on the default theme. Out of the box there are three sizes:
large. It is possible to change this by passing an explicit height to the button, as well.
Buttons support an icon either before or after the label via the
iconAfter props. Avoid using both icons in a
button at the same time.
Evergreen also supports icon-only buttons for a lighter-weight toolbar-like treatment. They support the same API as regular buttons.