alert

Import

import { Alert } from '@xpanseinc/nebula'

Usage

Status variants

Below are the 4 variation's of the Alert component, deliniated by status

Success

You have successfully downloaded the items.

<Alert status="success" onDismiss={handleDismiss}>
  You have successfully downloaded the items.
</Alert>

Neutral

Do forget to check your mail!

<Alert status="neutral" onDismiss={handleDismiss}>
  Do forget to check your mail!
</Alert>

Caution

You have 3 different settings that may conflict.

<Alert status="caution" onDismiss={handleDismiss}>
  You have 3 different settings that may conflict.
</Alert>

Negative

Something terrible has happened.

<Alert status="negative" onDismiss={handleDismiss}>
  Something terrible has happened.
</Alert>

Optional body content

You can choose to additional content within the body of a Alert.

In the below example, we have added a link that takes you to the Button component page.

This is an alert with custom content within.View now

<Alert onDismiss={handleDismiss}>
  This is an alert with custom content within.

  <a href="button" style={{position: 'relative',marginLeft: '16px',fontSize: '14px',fontWeight: '700',lineHeight: '20px',textDecoration: 'underline',color: '#5A52FF'}}>View now</a>
</Alert>

Optional dismiss parameter

You can choose to dismiss the Alert by adding the onDismiss parameter

This is a Alert that can be dismissed

<Alert onDismiss={handleDismiss}>
  This is a Alert that can be dismissed
</Alert>

Accessibility (aria-live)

For accessibility, we have dynamically assigned a aria-live value depending on status. Below are the values:

Success = polite
Neutral = polite
Caution = assertive
Negative = assertive