Documentation
ChevronDown

Alert

The Alert component is a reusable React component that displays a message to the user in a styled box. It can be used to provide feedback to the user, such as when an action has been successfully completed or when an error has occurred.

Usage

To use the Alert component, import it into your React component and render it with the appropriate props. The following props are available:

  • message (string): The message to display in the alert box. This is optional if the state prop is provided.
  • state: { info?: { message?: string | null, isError?: boolean } }: An object that can be used to display different types of messages in the alert box. The message property of the info object is used to display the message in the alert box. The isError property is used to determine the type of message to display. If it is set to true, the message will be displayed as an error message with a red background. If it is not set or set to false, the message will be displayed as an informational message with a blue background. This is optional if the message prop is provided.
  • isPushTop (boolean): A boolean value that determines whether to add a spacer above the alert box. This is useful for separating the alert box from other content on the page. This is optional and defaults to false.
  • isPushBottom (boolean): A boolean value that determines whether to add a spacer below the alert box. This is useful for separating the alert box from other content on the page. This is optional and defaults to false.
  • className (string): A string of classes to apply to the alert box. This is optional and defaults to an empty string.
JSX
Copy Copy
<Alert state={{ info: { message: "This is a danger alert", isError: true } }} />

States

The Alert component can be in various states depending on the message passed to it. The following states are available:

  • Default: This is the default state of the Alert when no message is passed.
  • Info: This state is triggered when the Alert has an informational message.
  • Warning: This state is triggered when the Alert has a warning message.
  • Danger: This state is triggered when the Alert has an error message.
  • Success: This state is triggered when the Alert has a success message.

Accessibility:

The Alert component should be designed with accessibility in mind. The following guidelines should be followed:

  • The Alert component should have a descriptive label that explains the information being presented to the user.
  • The Alert component should have a discernible focus state and be keyboard navigable.
  • The Alert component and its label should have an appropriate contrast ratio between the text and background color.
  • If the Alert component has an error associated with it, it should be announced to screen reader users when the Alert receives focus.
  • Similarly, if the Alert component has a help text associated with it, it should be announced to screen reader users when the Alert receives focus.

Usage of Alert Component with useStatus Hook

The Alert component can be used in a form along with the useStatus hook to easily manage form values and validations.

JSX
Copy Copy
import { useForm, useStatus } from "@aura-design/system/form";
import Input from "@aura-design/system/input";
import Button from "@aura-design/system/button";
import Alert from "@aura-design/system/alert";

export const WithStatus = () => {
  const status = useStatus();
  const formData = useForm({
    firstName: "",
    lastName: "",
    email: "",
  });

  const { firstName, lastName, email }: any = formData;

  const handleOnSubmit = async (event) => {
    event.preventDefault();
    status.resetStatus();
    status.setIsLoading(true);

    const fakeFetch = new Promise((resolve, reject) => {
      setTimeout(() => {
        const random_boolean = Math.random() < 0.5;
        resolve({ ok: random_boolean });
      }, 600);
    });

    const res = await fakeFetch;

    handleOnResponse(res);
  };

  const handleOnResponse = (res: any) => {
    status.setIsLoading(false);
    status.setSubmited(true);
    if (!res.ok) {
      status.setIsError(true);
      status.setMessage("An unexpected error has occurred.");
      return;
    }

    status.setMessage("Everything has gone well.");
  };

  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <Input placeholder="Name" {...firstName} />
        <Input placeholder="Last name" {...lastName} />
        <Input placeholder="Email" {...email} />
        <div className="inputer">
          <Button
            label="Submit"
            isLoadingText="Loading..."
            isLoading={status.state.isLoading}
          />
        </div>
      </form>
      <Alert state={status.state} isPushTop />
    </div>
  );
};

we're using the useStatus hook to manage the state of our component. We're also rendering a select element with some options, and when the user selects an option, we're updating the state of our component based on the selected option. If the selected option is "error", we're setting the isError flag to true and setting a message that will be displayed in the Alert component. Finally, we're rendering the Alert component only when there is a message to display.