Alert

Alert messages are meant to provide contextual feedback about important changes in the interface. They are used to convey essential information to the user, ensuring that critical updates or warnings are immediately noticeable.

Props

Name	Type	Description	Default
closable	`boolean`	If true, the alert will have a close button that will remove the message from the alert, only in banner and inline modes. The rest of the functionality will depend on the `onClose` event of each message (e.g. closing the modal alert).	`true`
message		`Message \| 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, apart from remove from the alert the current message, 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?: (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }`	Primary action of the alert.	-
secondaryAction	`{ icon?: (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	`string`	Title of the alert.	-

Examples

Basic usage

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

Semantics

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="1.5rem">
        <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 = [
    { text: "Your document as been auto-saved." },
    { 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." },
  ];

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="1.5rem">
        <DxcAlert
          title="Auto-saved document"
          message={messages}
          primaryAction={{ label: "Continue", onClick: () => {} }}
          secondaryAction={{ label: "Back", onClick: () => {} }}
        />
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

PreviousApplication layout