Button

View on GitHub

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

Button Props

This component composes ui-box

intentenum = 'none'
The intent of the button.
appearanceenum = 'default'
The appearance of the button.
isLoadingbool
When true, show a loading spinner before the children. This also disables the button.
isActivebool = false
Forcefully set the active state of a button. Useful in conjuction with a Popover.
iconBeforestring
Sets an icon before the text. Can be any icon from Evergreen.
iconAfterstring
Sets an icon after the text. Can be any icon from Evergreen.
disabledbool
When true, the button is disabled. isLoading also sets the button to disabled.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the button. Only use if you know what you are doing.
height = 32
paddingBottom = 0
paddingTop = 0

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

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

Common icon buttons

Height 32

Height 24

IconButton Props

This component composes ui-box

iconstring
Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. - If `null` or `undefined` or `false`, this component will render nothing. - If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._ This type is supported to simplify usage of this component in other Blueprint components. As a consumer, you should never use `<Icon icon={<element />}` directly; simply render `<element />` instead.
iconSizenumber
Specifies an explicit icon size instead of the default value
intentenum = 'none'
The intent of the button.
appearanceenum = 'default'
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.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the button. Only use if you know what you are doing.
height = 32

BackButton component

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

<BackButton />
code Hide code

BackButton Props

This component composes Button

children = 'Back'

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="arrow-up">Ascending</TextDropdownButton>
  <TextDropdownButton icon="arrow-down">Descending</TextDropdownButton>
</Pane>
code Hide code

TextDropdownButton Props

This component composes ui-box

isActivebool = false
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.
iconstring = 'caret-down'
Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. - If `null` or `undefined` or `false`, this component will render nothing. - If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._ This type is supported to simplify usage of this component in other Blueprint components. As a consumer, you should never use `<Icon icon={<element />}` directly; simply render `<element />` instead.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the button. Only use if you know what you are doing.