Expand commentComment on line R9Resolved
Halstack Design System
next

Overview

Guidelines

Foundations

Migration

Utilities

Components

Alert

Alert messages are meant to provide contextual feedback about important changes in the interface.

Overview
Code

Props

NameTypeDescriptionDefault
closablebooleanIf true, the alert will have a close button that will call the onClose.true
messageMessage | Message[]

being Message an object with the following properties:

{ onClose?: () => void; text: React.ReactNode; }
List of messages to be displayed. Each message has a close action that will call the onClose if it is defined. If the message is an array, the alert will show a navigation bar to move between the messages.
The modal mode only allows one message per alert. In this case, the message must be an object and the presence of the onClose attribute is mandatory, since the management of the closing of the alert relies completely on the user.		-
mode'inline' | 'modal' | 'banner'The mode of the alert. The possible values are:
  • inline: The alert must be displayed in the same place where it is declared. The user can navigate between the messages if the message is an array.
  • modal: The alert will be displayed in the middle of the screen with an overlay layer behind. In this mode, the user has the responsibility of hiding the alert with the onClose event of the message, otherwise the overlaid modal will remain visible.
  • banner: The alert must be displayed at the top of the screen. The user can navigate between the messages if the message is an array.
'inline'
primaryAction
{ icon?: string | (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }
Primary action of the alert.-
secondaryAction
{ icon?: string | (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }
Secondary action of the alert.-
semantic'error' | 'info' | 'success' | 'warning'Specifies the semantic meaning of the alert.'info'
Required
title
stringTitle of the alert.-

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAlert
        title="Information"
        message={{ text: "Your document has been auto-saved." }}
      />
    </DxcInset>
  );
}

Semantics

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-l)">
        <DxcAlert title="Auto-saved document" message={{ text: "Your document as been auto-saved. You can continue working without worry, as all changes are being saved automatically." }} />
        <DxcAlert title="Read carefully" semantic="warning" message={{ text: "Please read the documents carefully before the submission of the data." }} />
        <DxcAlert title="Save failed" semantic="error" message={{ text: "You have unsaved changes in your document. If you navigate away from this page, you will lose any changes you have made." }} />
        <DxcAlert title="Saved successfully" semantic="success" message={{ text: "Your document has been saved successfully." }} />
      </DxcFlex>
    </DxcInset>
  );
}

Several messages

() => {
  const [messages, setMessages] = useState([
    {
      text: "Your document as been auto-saved.",
      onClose: () => {
        setMessages((prevMessages) => prevMessages.filter(({ text }) => text !== "Your document as been auto-saved."));
      },
    },
    {
      text: "You can continue working without worrying, as all changes are automatically saved.",
      onClose: () => {
        setMessages((prevMessages) =>
          prevMessages.filter(
            ({ text }) => text !== "You can continue working without worrying, as all changes are automatically saved."
          )
        );
      },
    },
    {
      text: "You can also go back to the previous version of the document.",
      onClose: () => {
        setMessages((prevMessages) =>
          prevMessages.filter(({ text }) => text !== "You can also go back to the previous version of the document.")
        );
      },
    },
  ]);

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-l)">
        <DxcAlert
          title="Auto-saved document"
          message={messages}
          primaryAction={{ label: "Continue", onClick: () => {} }}
          secondaryAction={{ label: "Back", onClick: () => {} }}
        />
      </DxcFlex>
    </DxcInset>
  );
}
On this page