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.

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

All button variations

Height 24
Height 32
Height 40
Default Appearance
DefaultSuccessWarningDangerIcon BeforeIcon After
Primary Appearance
DefaultSuccessWarningDangerIcon BeforeIcon After
Minimal Appearance
DefaultSuccessWarningDangerIcon BeforeIcon After
 Show code

Button Appearances

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

Appearances

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

DefaultPrimaryMinimal
<>
  <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

NoneSuccessWarningDanger
<>
  <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

NoneSuccessWarningDanger
<>
  <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

NoneSuccessWarningDanger
<>
  <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

Height 20Height 24Height 32Height 40Height 48Height 56
<>
  <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.

SettingsEditDocsBackDownload...Delete...SearchFilter
<>
  <Button marginRight={12} iconBefore="cog">Settings</Button>
  <Button marginRight={12} iconBefore="edit">Edit</Button>
  <Button marginRight={12} iconBefore="manual">Docs</Button>
  <Button marginRight={12} iconBefore="arrow-left">Back</Button>
  <Button marginRight={12} iconBefore="download">Download...</Button>
  <Button marginRight={12} iconBefore="trash" intent="danger">Delete...</Button>
  <Button marginRight={12} iconBefore="search">Search</Button>
  <Button marginRight={12} iconAfter="caret-down">Filter</Button>
</>
 Hide code

IconButton

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

Simple IconButton example

<IconButton icon="trash" 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="cross" height={40} />
 Hide code

<IconButton icon="cross" 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="notifications" iconSize={18} />
 Hide code

Common icon buttons

Height 32
Height 24
 Show code

BackButton component

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

Back
<BackButton />
 Hide code

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

Table HeaderAscendingDescending
<Pane>
  <TextDropdownButton marginRight={16}>Table Header</TextDropdownButton>
  <TextDropdownButton marginRight={16} icon="arrow-up">Ascending</TextDropdownButton>
  <TextDropdownButton icon="arrow-down">Descending</TextDropdownButton>
</Pane>
 Hide code