The Alert and InlineAlert components are used to give feedback to the user about an action or state.

Evergreen exports two components to create text alerts:

  • Alert: alert component with icon, title and optional description.
  • InlineAlert: alert component with icon and title.

Intent API

Both the Alert and the InlineAlert components implement the intent prop. The intent is a interface used across Evergreen and has the following options:

  • info: intent="none"
  • success: intent="success"
  • warning: intent="warning"
  • danger: intent="danger"


The Alert component can have a title and children. There are props to configure the icon and the border on the left.

Hide code

Alerts with description

Hide code

Card appearance

The card appearance is useful if the alert is presented outside of a card or pane.

Hide code


The InlineAlert is useful when not showing a title and space is limited.

There are over 200 integrations available
Your source is now sending data
Changes will affect all warehouses
We weren’t able to save your changes
Hide code

Alert Props

This component composes ui-box

childrenstring | node
The content of the alert. When a string is passed it is wrapped in a `<Text size={400} />` component.
intent'none' | 'success' | 'warning' | 'danger'
The intent of the alert.
The title of the alert.
When true, show a border on the left matching the type.
When true, show a icon on the left matching the type,
When true, show a remove icon button.
Function called when the remove button is clicked.
appearance'default' | 'card'
The appearance of the alert.