Alerts are used to inform users of a particular action or state. Refrain from using multiple at the same time. Alert will span across the parents width and has styling for Links and icons within the alert.

For information on Alert style and usage guidelines, check out Alert Design Guidelines.

Example

 
This is a success alert!
 
<Alert>This is a success alert!</Alert>
<Alert>This is a success alert!</Alert>

Variants

There are multiple color variants you may use (success, warning, error, information). If not given, it defaults to success.

 
This is a success alert!
This is a error alert!
This is a information  alert!
This is a warning alert!
 
<Alert variant="success" mb="6px">This is a success alert!</Alert>
<Alert variant="error" mb="6px">This is a error alert!</Alert>
<Alert variant="information" mb="6px">This is a information  alert!</Alert>
<Alert variant="warning">This is a warning alert!</Alert>
<Alert variant="success" mb="6px">This is a success alert!</Alert>
<Alert variant="error" mb="6px">This is a error alert!</Alert>
<Alert variant="information" mb="6px">This is a information  alert!</Alert>
<Alert variant="warning">This is a warning alert!</Alert>

Adding Links & Icons

Links in alerts will be styled with the darker shade of the color variant. Any svg icon will automatically be placed on the left.

 
Error! Logs will be here!
 
<Alert variant="error" mb="8px">
    <Icon type="errorAlert" />
    Error! Logs will be <Link href="#">here</Link>!
</Alert>
<Alert variant="error" mb="8px">
    <Icon type="errorAlert" />
    Error! Logs will be <Link href="#">here</Link>!
</Alert>

Common Props

Alert includes COMMON props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props