Last updated 3 months ago

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!

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

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

NameTypeDefaultDescription
variant'attention' | 'warning' | 'danger' | 'success'attentionThe variant of the alert. This defines the color and icon used.
headerstringThe header of the component.
contentstringThe content of the component.
childrenelementTypeThe content of the component. Either a string to use, an HTML element, or a component.