Alert

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


type

children
onClose
isCloseable
controlled

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

NameTypeDefaultDescription

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