Introduction

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"

Alert

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

<Pane>
  <Alert
    intent="none"
    title="There are over 200 integrations available"
    marginBottom={32}
  />
 <Alert
    intent="success"
    title="Your source is now sending data"
    marginBottom={32}
  />
  <Alert
    intent="warning"
    title="Changes will affect all warehouses"
    marginBottom={32}
  />
  <Alert
    intent="danger"
    title="We weren’t able to save your changes"
  />
</Pane>
Hide code

Alerts with description

<Pane>
  <Alert
    intent="none"
    title="There are over 200 integrations available"
    marginBottom={32}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
 <Alert
    intent="success"
    title="Your source is now sending data"
    marginBottom={32}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
  <Alert
    intent="warning"
    title="Changes will affect all warehouses"
    marginBottom={32}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
  <Alert
    intent="danger"
    title="We weren’t able to save your changes"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
</Pane>
Hide code

Card appearance

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

<Pane>
  <Alert
    appearance="card"
    intent="none"
    title="There are over 200 integrations available"
    marginBottom={32}
  />
 <Alert
    appearance="card"
    intent="success"
    title="Your source is now sending data"
    marginBottom={32}
  />
  <Alert
    appearance="card"
    intent="warning"
    title="Changes will affect all warehouses"
    marginBottom={32}
  />
  <Alert
    appearance="card"
    intent="danger"
    title="We weren’t able to save your changes"
  />
</Pane>
Hide code

InlineAlert

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
<Pane>
<InlineAlert intent="none" marginBottom={16}>
    There are over 200 integrations available
  </InlineAlert>
 <InlineAlert intent="success" marginBottom={16}>
    Your source is now sending data
  </InlineAlert>
  <InlineAlert intent="warning" marginBottom={16}>
    Changes will affect all warehouses
  </InlineAlert>
  <InlineAlert intent="danger">
    We weren’t able to save your changes
  </InlineAlert>
</Pane>
Hide code

Alert Props

This component composes ui-box

childrenunion
The content of the alert. When a string is passed it is wrapped in a `<Text size={400} />` component.
intentenum = 'none'
The intent of the alert.
titlenode
The title of the alert.
hasTrimbool = true
When true, show a border on the left matching the type.
hasIconbool = true
When true, show a icon on the left matching the type,
isRemoveablebool = false
When true, show a remove icon button.
onRemovefunc
Function called when the remove button is clicked.
appearanceenum = 'default'
The appearance of the alert.
themeobjectrequired
Theme provided by ThemeProvider.