Button

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.


<Button appearance="primary">Hi Evergreen!</Button>
<Button appearance="primary">Hi Evergreen!</Button>
 Hide code

All button variations

Height 24
Height 32
Height 40
Default Appearance
Primary Appearance
Minimal Appearance
 Show code

Button Appearances

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

Appearances

default — this is the default.
primary
minimal


<>
  <Button marginRight={16}>Default</Button>
  <Button marginRight={16} appearance="primary">Primary</Button>
  <Button marginRight={16} appearance="minimal">Minimal</Button>
</>
<>
  <Button marginRight={16}>Default</Button>
  <Button marginRight={16} appearance="primary">Primary</Button>
  <Button marginRight={16} appearance="minimal">Minimal</Button>
</>
 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


<>
  <Button marginRight={16} intent="none">None</Button>
  <Button marginRight={16} intent="success">Success</Button>
  <Button marginRight={16} intent="warning">Warning</Button>
  <Button marginRight={16} intent="danger">Danger</Button>
</>
<>
  <Button marginRight={16} intent="none">None</Button>
  <Button marginRight={16} intent="success">Success</Button>
  <Button marginRight={16} intent="warning">Warning</Button>
  <Button marginRight={16} intent="danger">Danger</Button>
</>
 Hide code

Mixing appearance and intent

The intent property works with any appearance.

Primary with Intent


<>
  <Button marginRight={16} appearance="primary" intent="none">None</Button>
  <Button marginRight={16} appearance="primary" intent="success">Success</Button>
  <Button marginRight={16} appearance="primary" intent="warning">Warning</Button>
  <Button marginRight={16} appearance="primary" intent="danger">Danger</Button>
</>
<>
  <Button marginRight={16} appearance="primary" intent="none">None</Button>
  <Button marginRight={16} appearance="primary" intent="success">Success</Button>
  <Button marginRight={16} appearance="primary" intent="warning">Warning</Button>
  <Button marginRight={16} appearance="primary" intent="danger">Danger</Button>
</>
 Hide code

Minimal with Intent


<>
  <Button marginRight={16} appearance="minimal" intent="none">None</Button>
  <Button marginRight={16} appearance="minimal" intent="success">Success</Button>
  <Button marginRight={16} appearance="minimal" intent="warning">Warning</Button>
  <Button marginRight={16} appearance="minimal" intent="danger">Danger</Button>
</>
<>
  <Button marginRight={16} appearance="minimal" intent="none">None</Button>
  <Button marginRight={16} appearance="minimal" intent="success">Success</Button>
  <Button marginRight={16} appearance="minimal" intent="warning">Warning</Button>
  <Button marginRight={16} appearance="minimal" intent="danger">Danger</Button>
</>
 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.

Recommended heights

24
32 — default height
40


<>
  <Button marginRight={12} height={20}>Height 20</Button>
  <Button marginRight={12} height={24}>Height 24</Button>
  <Button marginRight={12} height={32}>Height 32</Button>
  <Button marginRight={12} height={40}>Height 40</Button>
  <Button marginRight={12} height={48}>Height 48</Button>
  <Button marginRight={12} height={56}>Height 56</Button>
</>
<>
  <Button marginRight={12} height={20}>Height 20</Button>
  <Button marginRight={12} height={24}>Height 24</Button>
  <Button marginRight={12} height={32}>Height 32</Button>
  <Button marginRight={12} height={40}>Height 40</Button>
  <Button marginRight={12} height={48}>Height 48</Button>
  <Button marginRight={12} height={56}>Height 56</Button>
</>
 Hide code

Buttons with an Icon

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


<>
  <Button marginY={8} marginRight={12} iconBefore={CogIcon}>Settings</Button>
  <Button marginY={8} marginRight={12} iconBefore={EditIcon}>Edit</Button>
  <Button marginY={8} marginRight={12} iconBefore={ManualIcon}>Docs</Button>
  <Button marginY={8} marginRight={12} iconBefore={ArrowLeftIcon}>Back</Button>
  <Button marginY={8} marginRight={12} iconBefore={DownloadIcon}>Download...</Button>
  <Button marginY={8} marginRight={12} iconBefore={TrashIcon} intent="danger">Delete...</Button>
  <Button marginY={8} marginRight={12} iconBefore={SearchIcon}>Search</Button>
  <Button marginY={8} marginRight={12} iconAfter={CaretDownIcon}>Filter</Button>
</>
<>
  <Button marginY={8} marginRight={12} iconBefore={CogIcon}>Settings</Button>
  <Button marginY={8} marginRight={12} iconBefore={EditIcon}>Edit</Button>
  <Button marginY={8} marginRight={12} iconBefore={ManualIcon}>Docs</Button>
  <Button marginY={8} marginRight={12} iconBefore={ArrowLeftIcon}>Back</Button>
  <Button marginY={8} marginRight={12} iconBefore={DownloadIcon}>Download...</Button>
  <Button marginY={8} marginRight={12} iconBefore={TrashIcon} intent="danger">Delete...</Button>
  <Button marginY={8} marginRight={12} iconBefore={SearchIcon}>Search</Button>
  <Button marginY={8} marginRight={12} iconAfter={CaretDownIcon}>Filter</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


<IconButton icon={TrashIcon} intent="danger" />
<IconButton icon={TrashIcon} intent="danger" />
 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.


<IconButton icon={CrossIcon} height={40} />
<IconButton icon={CrossIcon} height={40} />
 Hide code


<IconButton icon={CrossIcon} height={24} />
<IconButton icon={CrossIcon} height={24} />
 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.


<IconButton appearance="minimal" icon={NotificationsIcon} iconSize={18} />
<IconButton appearance="minimal" icon={NotificationsIcon} iconSize={18} />
 Hide code

Common icon buttons

Height 32
Height 24
 Show code

`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.


<BackButton />
<BackButton />
 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.

Link
<Button is="a" href="#">Link</Button>
<Button is="a" href="#">Link</Button>
 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.


<Pane>
  <TextDropdownButton marginRight={16}>Table Header</TextDropdownButton>
  <TextDropdownButton marginRight={16} icon={ArrowUpIcon}>Ascending</TextDropdownButton>
  <TextDropdownButton icon={ArrowDownIcon}>Descending</TextDropdownButton>
</Pane>
<Pane>
  <TextDropdownButton marginRight={16}>Table Header</TextDropdownButton>
  <TextDropdownButton marginRight={16} icon={ArrowUpIcon}>Ascending</TextDropdownButton>
  <TextDropdownButton icon={ArrowDownIcon}>Descending</TextDropdownButton>
</Pane>
 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.

Evergreen exports multiple button components

Button

All button variations

Default Appearance

Primary Appearance

Minimal Appearance

Button Appearances

Appearances

Button Intent

Intent

Mixing appearance and intent

Primary with Intent

Minimal with Intent

Button Sizes

Recommended heights

Buttons with an Icon

Button Props

IconButton

Simple IconButton example

Use the height property to resize the icon button

Specifically override the icon size

Common icon buttons

Height 32

Height 24

IconButton Props

BackButton component

BackButton Props

Buttons as links

TextDropdownButton component

TextDropdownButton Props

Related

`Button` Props

`IconButton` Props

`BackButton` Props

`TextDropdownButton` Props