Alert

An alert is a concise, event-driven message that communicates information and requires minimal interaction.

import {Alert} from "@nulogy/components";

<Alert type="danger" title="Important information" isCloseaeble>
  Details about important information
</Alert>

Use when

  • a user completes a task successfully
  • to call attention to an error that requires attention
  • to inform users about upcoming service maintenance
  • to warn users about a potential issue
  • a form has returned with errors

Variations

Informative

Informative alerts provide a user with general messages and non-critical information.

<Alert type="informative">Text</Alert>

Danger

Danger alerts inform users about errors that require attention.

<Alert type="danger">Text</Alert>

Success

Success alerts inform users that an action has been completed successfully.

<Alert type="success">Text</Alert>

Warning

Warning alerts raise caution.

<Alert type="warning">Text</Alert>

Alert with Link

A link may be added to the content of an alert. Within alerts, link text is always displayed in black.

<Alert>
  Alert text <Link href="/">linked details</Link>.
</Alert>

Props

NameTypeDefaultDescription

isCloseable

boolean

false

Provides a close icon in the top right corner.

title

string

An optional title to display in bold above the main text.

type

string

informative

The type of alert. Accepts informative, danger, warning and success.

className

String

undefined

className passed to the alert component.

closeAriaLabel

String

close

aria label for close button

The Alert component has access to space style props. See the style prop documentation for a full list of available props.

Content guidelines

To provide a more detailed explanation of the message that is being communicated, a link to the new screen can be provided in the child content using a Link component.

Related components