Alert

Alerts are used to communicate a state that affects a system, feature or page.

Import#

Nature UI exports 5 alert related components.

  • Alert: A complete standalone alert component.
  • AlertWrapper: The wrapper for alert components.
  • AlertIcon: The visual icon for the alert that changes based on the status prop.
  • AlertTitle: The title of the alert to be announced by screen readers.
  • AlertDescription: The description of the alert to be announced by screen readers.
import {
Alert,
AlertWrapper,
AlertTitle,
AlertDescription,
AlertIcon,
} from '@nature-ui/core';

Usage#

Editable Example

Advanced Usage#

Editable Example

Status#

Change the status of the alerts by passing the status prop. This affects the color scheme and icon used. Alert supports error, success, warning and info statuses.

Editable Example

Variants#

Alert has 4 variant styles you can use. Pass the variant prop and use either subtle, solid, left-accent or top-accent.

Editable Example

Composition#

Alert ships with smaller components to allow for flexibility in creating all kinds of layouts. Here's an example of a custom alert style and layout:

Editable Example

Alert can also incorporate other Nature UI components. Here's an example of an alert with wrapping description text:

Editable Example

Props#

Alert Props#

NameTypeDefaultDescription
statuserror, success, warning, infoinfoThe status of the alert
variantsubtle, solid, left-accent, top-accentsubtleThe variant of the alert style to use.

AlertWrapper Props#

AlertIcon composes Alert and changes the icon or background respectively based on the status or variant prop.

AlertIcon Props#

AlertIcon composes Icon and changes the icon based on the status prop.

AlertTitle Props#

AlertTitle composes the Box component.

AlertDescription Props#

AlertDescription composes the Box component.