Alert

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

type

children

Hello

Hello

title

onClose

() => alert("close")

() => alert("close")

isCloseable

closeAriaLabel

controlled

import * as React from "react";
import { Alert } from "@nulogy/components";

export default () => {
  return (
    <Alert
      title="Title"
      onClose={() => alert("close")}
      isCloseable
      closeAriaLabel="close"
    >
      Hello
    </Alert>
  );
}

import * as React from "react";
import { Alert } from "@nulogy/components";

export default () => {
  return (
    <Alert
      title="Title"
      onClose={() => alert("close")}
      isCloseable
      closeAriaLabel="close"
    >
      Hello
    </Alert>
  );
}

Variations

Informative

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

Danger

Danger alerts inform users about errors that require attention.

Success

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

Props

Name	Type	Default	Description
type	enum	informative	The type of alert. Accepts informative, danger, warning and success.
children	react node		Visible message.
title	string		An optional title to display in bold above the main text.
onClose	function		Callback function invoked when the Alert is closed.
isCloseable	boolean	false	Provides a close icon in the top right corner.
closeAriaLabel	string		Aria label for close button
controlled	boolean	false	If true, will allow the Alert's opened and closed state to be controlled through props rather than within the component's internal state

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

Toast