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.
Hide code
All button variations
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
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.
Recommended heights
24
32
— default height40
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'
appearance'default' | 'minimal' | 'primary'
isLoadingbool
isActivebool
iconBeforeelementType | element
iconAfterelementType | element
disabledbool
classNamestring
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
Show code
IconButton
Props
This component composes ui-box
iconelementType | element
iconSizenumber
intent'none' | 'success' | 'warning' | 'danger'
appearance'default' | 'minimal' | 'primary'
isActivebool
disabledbool
classNamestring
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
disabledbool
iconelementType | element
classNamestring