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#

<Alert status="error">Data uploaded to the server. Fire on!</Alert>

Advanced Usage#

<AlertWrapper variant="solid" status="error" className="rounded-md">
  <AlertIcon />
  <AlertTitle className="mr-3">Outdated</AlertTitle>
  <AlertDescription>Your experience may be degraded!</AlertDescription>
</AlertWrapper>

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.

<Stack col>
  <Alert status="success">Data uploaded to the server. Fire on!</Alert>
  <Alert status="error">Data uploaded to the server. Fire on!</Alert>
  <Alert status="warning">
    Seems your account is about expire, upgrade now
  </Alert>
  <Alert status="info">Nature UI V2 is coming soon!</Alert>
</Stack>

Variants#

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

<Stack col>
  <Alert variant="subtle" status="success">
    Data uploaded to the server. Fire on!
  </Alert>
  <Alert variant="solid" status="success">
    Data uploaded to the server. Fire on!
  </Alert>
  <Alert variant="left-accent" status="success">
    Data uploaded to the server. Fire on!
  </Alert>
  <Alert variant="top-accent" status="success">
    Data uploaded to the server. Fire on!
  </Alert>
</Stack>

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:

<AlertWrapper
  status="success"
  variant="subtle"
  className="flex-col items-center justify-center text-center h-48"
>
  <AlertIcon boxSize="40px" className={"mr-0"} />
  <AlertTitle className="mt-4 mb-1 text-lg">Application submitted!</AlertTitle>
  <AlertDescription className="max-w-sm">
    Thanks for submitting your application. Our team will get back to you soon.
  </AlertDescription>
</AlertWrapper>

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

<AlertWrapper status="success">
  <AlertIcon />
  <Box className="flex-1">
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription className="block">
      Your application has been received. We will review your application and
      respond within the next 48 hours.
    </AlertDescription>
  </Box>
  <CloseButton className="absolute right-3 top-3" />
</AlertWrapper>

Props#

Alert Props#

Name	Type	Default	Description
status	`error`, `success`, `warning`, `info`	`info`	The status of the alert
variant	`subtle`, `solid`, `left-accent`, `top-accent`	`subtle`	The 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.