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