Alert

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.


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


There are over 200 integrations available
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Your source is now sending data
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Changes will affect all warehouses
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
<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>
<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.


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

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.

titlenode

The title of the alert.

hasTrimbool

When true, show a border on the left matching the type.

hasIconbool

When true, show a icon on the left matching the type,

isRemoveablebool

When true, show a remove icon button.

onRemovefunc

Function called when the remove button is clicked.

appearance'default' | 'card'

The appearance of the alert.

Introduction

Intent API

Alert

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

Alerts with description

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

Card appearance

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

InlineAlert

Alert Props

Related

`Alert` Props