Alert

Attention: Now that I have your attention...

Success: Hooyah!

This is a header

Warning: I told you so!

Danger: I really told you so!

Copy

Copied

<Alert variant="attention" content="Attention: Now that I have your attention..." />
<Alert variant="attention">
  <strong>Attention:</strong> Now that I have your attention...
</Alert>
<Alert variant="success" content="Success: Hooyah!" />
<Alert variant="warning" content="Warning: I told you so!" header="This is a header" />
<Alert variant="danger" content="Danger: I really told you so!" />

You can provide nested string, HTML element, or component for displaying content.

Attention: Now that I have your attention...

Error

This is an error alert — check it out!

Copy

Copied

<Alert variant="attention">
  <strong>Attention:</strong> Now that I have your attention...
</Alert>
<Alert>
  <H3>Error</H3>
  This is an error alert — <strong>check it out!</strong>
</Alert>

Props

Either content or children property is required.

Name	Type	Description
variant	'attention' \| 'warning' \| 'danger' \| 'success'	The variant of the alert. This defines the color and icon used. Default value: attention
header	string	The header of the component.
content	string	The content of the component.
children	elementType	The content of the component. Either a string to use, an HTML element, or a component.