Evergreen exports multiple button components

  • Button: most commonly used, can have a icon on the left or right side.
  • IconButton: a button that holds a single icon.
  • BackButton: a preset of the Button component.
  • TextDropdownButton: a bare-bones button that is used primarily in table headers.

Button, IconButton and BackButton all share a very similar API and look. TextDropdownButton is a bit different.

Button

The Button component is the most common button component. It contains a label and optional icons before or after the label.

Hide code

All button variations

Default Appearance

Primary Appearance

Minimal Appearance

Button Appearances

The Button component has a appearance property with 3 available values:

Appearances

  • default — this is the default.
  • primary
  • minimal
Hide code

Button Intent

In addition to the appearance — a Button can also have a intent property. The intent property is a slightly abstract API that maps to the following values:

Intent

  • none — this is the default.
  • success
  • warning
  • danger
Hide code

Mixing appearance and intent

The intent property works with any appearance.

Primary with Intent

Hide code

Minimal with Intent

Hide code

Button Sizes

By default buttons and controls have a height of 32px. It is possible to change this to any height and the text style and spacing will adjust. You should however keep the height on the 8px or in some cases the 4px grid. You should only need the following recommended heights.

  • 24
  • 32 — default height
  • 40
Hide code

Buttons with an Icon

Buttons support an icon on either before or after the label. Avoid using two icons in a button.

Hide code

Button Props

This component composes ui-box

intent'none' | 'success' | 'warning' | 'danger'
The intent of the button.
appearance'default' | 'minimal' | 'primary'
The appearance of the button.
isLoadingbool
When true, show a loading spinner before the children. This also disables the button.
isActivebool
Forcefully set the active state of a button. Useful in conjuction with a Popover.
iconBeforeelementType | element
Sets an icon before the text. Can be any icon from Evergreen or a custom element.
iconAfterelementType | element
Sets an icon after the text. Can be any icon from Evergreen or a custom element.
disabledbool
When true, the button is disabled. isLoading also sets the button to disabled.
classNamestring
Class name passed to the button. Only use if you know what you are doing.

IconButton

For the use case of creating a button with a single icon Evergreen exports the IconButton component.

Simple IconButton example

Hide code

Use the height property to resize the icon button

Use the height property on the IconButton component to resize the component. The icon will automatically resize for the given height.

Hide code
Hide code

Specifically override the icon size

In some rare cases you might need to override the icon size. Use the iconSize property to do this.

This is not a required property, the icon will automatically resize based on the given height.

Hide code

Common icon buttons

Height 32

Height 24

IconButton Props

This component composes ui-box

iconelementType | element
The Evergreen icon or custom icon to render
iconSizenumber
Specifies an explicit icon size instead of the default value
intent'none' | 'success' | 'warning' | 'danger'
The intent of the button.
appearance'default' | 'minimal' | 'primary'
The appearance of the button.
isActivebool
Forcefully set the active state of a button. Useful in conjuction with a Popover.
disabledbool
When true, the button is disabled. isLoading also sets the button to disabled.
classNamestring
Class name passed to the button. Only use if you know what you are doing.

BackButton component

The BackButton component is a preset based on the Button component.

Hide code

BackButton Props

This component composes Button

Buttons as links

Buttons can be used as links by using the optional is property with a value such as Link from react-router, or an a tag.

Hide code

TextDropdownButton component

The TextDropdownButton is different from the other types of buttons. It doesn’t work with a height, instead the dimensions are based on the text size. This component is used inside of table header cells.

Hide code

TextDropdownButton Props

This component composes ui-box

isActivebool
Forcefully set the active state of a button. Useful in conjuction with a Popover.
disabledbool
When true, the button is disabled. isLoading also sets the button to disabled.
iconelementType | element
An Evergreen icon or custom icon node. By default it uses CaretDownIcon
classNamestring
Class name passed to the button. Only use if you know what you are doing.