Type keyword

Alert

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes. Because alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working, it is crucial they do not affect keyboard focus. The Alert Dialog Pattern is designed for situations where interrupting work flow is necessary.

Variant

Here are some types of alerts, including:

Bold variant

Subtle variant

Info alert

Info alerts are the most common alerts. Use them to guide a user’s attention to relevant details, but keep it focused and related to the topic on the screen.

Success alert

Success alerts confirm that an instruction from the user, such as to make a payment or request a refund, was processed successfully. Usually used without an action button.

Caution alert

Use caution alerts when you need to inform users about a potentially unfavorable situation that requires eventual action from them. If the issue requires immediate attention, use a critical alert.

Danger alert

Use danger alerts when something is blocking users from continuing or an issue needs to be resolved immediately. The alert should offer a solution to the problem.

Anatomy

The Alert component is used to display important information or alerts to users. It is commonly used for information, warnings, errors, success messages, and notifications.

  1. Container
  2. Alert type
  3. Message
  4. Close button

Usage

The Alert component is employed to convey crucial information or notifications to users. It’s commonly used in web applications, online forms, and similar situations to inform users about updates or errors.

Accessibility

Accessibility is a crucial aspect of designing and implementing the Alert component to ensure that it’s usable by all individuals. Here are some considerations for making Alert accessible:

  • Use clear and concise text: Ensure the text in the Alert is easy to read and understand, with a font size and color contrast that meets accessibility standards.
  • Ensure proper color contrast: The Alert’s color should contrast well with the background to make it visible to users with color blindness or low vision. A minimum contrast ratio of 4.5:1 between text and background is recommended by WCAG.
  • Use ARIA attributes: Employ ARIA attributes to label the Alert as an alert and provide additional context for screen readers.
  • Include a focus indicator: Make sure the Alert has a visible and easily identifiable focus indicator for keyboard users navigating the website or application.
  • Allow sufficient time for message reading: Some users may need extra time to read the Alert due to disabilities. Ensure the Alert remains visible long enough for users to read and process the information.
  • Use descriptive icons: If icons are used, ensure they are descriptive and not solely reliant on color to convey meaning. This aids users with visual impairments or color blindness in understanding the Alert’s type.
  • Test with assistive technology: Thoroughly test the Alert component with assistive technology like screen readers and keyboard-only navigation to ensure accessibility for users with disabilities.

Clear and concise language for the alert message

Unclear or misleading language for the alert message.

import { Alert } from '@efishery/onefish'

const function App = () => {
  return (
    <Alert status='error'>
      <AlertIcon />
      <AlertTitle>Your browser is outdated!</AlertTitle>
      <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
    </Alert>
  )
}