Alert

In general, use an alert to communicate essential information to a user in a prominent way.

Use an inline alert to communicate a short message about a specific user action within a component or layout. An inline alert appears in a content area and disappears when a user closes it or navigates away from the page. For example, use an inline alert to inform a user their form was submitted with errors.

For time-based updates and non-blocking confirmations, use a toast via the RhAlert.toast() API. When to use toasts, accessibility considerations, layout, stacking, responsive behavior, and the full API are documented on the Alert pattern page.

The status levels for alerts are Neutral, Info, Success, Warning, Caution, and Error. Each level communicates a specific message or severity.

Depending on the message, an inline alert can be dismissible or not dismissible. The close button should not be included if it is critical that a user read or interact with the alert. Toast alerts are always dismissible; see the Alert pattern.

Inline and toast alerts have limited space (see the Alert pattern for toast-specific guidance). Therefore content should be short and concise. A user should be able to quickly scan the content and know what steps to take next.

Actions enable a user to perform a specific action in relation to the alert message. They are optional, and no more than two should be used in a single inline or toast alert. When using two actions, ensure that they follow the guidelines below:

• Primary action - use the Secondary button element
• Secondary action - use the Link button element

An inline alert appears at the top of a content area or close to an item needing attention. The width varies based on content and layout. They can expand to fill a container or related content area.

Toast layout, persistence, stacking, and responsive behavior are documented on the Alert pattern page.

On large screens, inline alert height is determined by the amount of content included. Inline alert width is determined by the width of its container or related content area.

On small screens, inline alerts span one column. Toast sizing and stacking on small screens are described on the Alert pattern page.

Use the correct alert variants for the correct use cases.

Do not use an inline alert for toast alert use cases and vice versa. See the Alert pattern for toast guidance.