# Alert

An alert displays important messages, feedback, or time-sensitive information.


## Overview

### Variants

A set of predefined styles that convey different meanings and states through consistent visual treatment each with specific icons.

#### Information

Used for _passive_, non-critical updates like tips or background information. It's quiet and unobtrusive.

#### Notice

Used for _actionable_, attention-worthy updates that are still non-critical, like a change in a process or a reminder to do something soon.

#### Positive

Confirms successful actions, such as form submissions, with a success message, optional next steps, and possible brand reinforcement.

#### Warning

Highlights non-critical issues, such as upcoming deadlines, with a concise issue summary, optional duration estimate, and suggested actions.

#### Negative

Communicates critical issues or errors, such as system outages, with a clear problem description, optional apology for system issues, and resolution guidance.

### Action button

Alert supports an optional action button with customisable text to trigger relevant actions.

### Dismissible

Alerts can be configured as `dismissible` in order to show a close button in the upper right corner. This also enabled closing the alert by pressing the escape key.

### Auto-dismiss

Alert can also be set up to use an auto-dismiss timer. In this configuration, a timer progress bar will be shown at the bottom of the alert, and the alert will close once the timer reaches the end.

### Placement

The most important rule is to place the alert near the issue that triggered it.

#### Global alert

Used for system-wide messages.

*   Placed above the header and takes full width of the screen.
    
*   The icon, text content, and action button should be center-aligned horizontally.
    
*   The dismiss button is placed at the far right.

#### Page alert

Used for messages affecting the entire page (e.g., _Bankgiro is down_).

*   Placed at the top of the page, below the header.

#### Group alert

Used for messages related to a specific module (e.g., _Transaction listing is unavailable_).

*   Placed within the module, at the top.

#### Specific alert

Used for messages related to specific content (e.g., _Negative balance_).

*   Placed directly in the content area, close to the element it concerns (such as a table or field).

### Guidelines

Select the appropriate variant to match the message’s intent, such as using positive for success messages or negative for errors. Also ensure a meaningful label property is set to describe the alert’s purpose for accessibility. A label should always be set when using alert.

Choose the role property carefully, using alert for critical messages and status for informational updates, to align with ARIA best practices.

For toast-like messages, like save confirmations and other non-critical messages, auto-dismiss can be used to avoid interrupting user workflows.


## UX Guidelines

### Writing UX text for alerts

### Alert with a heading

### Alert without a heading

### Alert with a button

### Alert with a link

### Using buttons and links together

### Information alert

### Success alert

### Warning alert

### Critical and error alert