Alert

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

Props

Name	Type	Description	Default
type	`'info' \| 'confirm' \| 'warning' \| 'error'`	Uses one of the available alert types.	`'info'`
mode	`'inline' \| 'modal'`	Uses one of the available alert modes: inline: Renders as a regular component, following the natural order of the elements in the document tree. 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, otherwise the overlaid modal will remain visible.	`'inline'`
inlineText	`string`	Message of the alert.	-
onClose	`() => void`	If defined, a close button will be displayed and this function will be executed when the action is clicked. When `mode="modal"` this function will also be executed when the background overlay is clicked. The user has the responsibility of hiding the modal, otherwise it will remain visible.	-
children	`React.ReactNode`	The details section of the alert. Can be used to render custom content in this area.	-
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-
size	`'small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent'`	Size of the component.	`'fitContent'`
tabIndex	`number`	Value of the `tabindex` attribute applied to the close button.	`0`

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcAlert inlineText="Please read the documents carefully before the submission of the data." />
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcAlert inlineText="Please read the documents carefully before the submission of the data." />
    </DxcInset>
  );
}

() => {
  const [isVisible, changeIsVisible] = useState(false);
  const handleVisibility = () => {
    changeIsVisible(!isVisible);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Show information" onClick={handleVisibility} />
      {isVisible && (
        <DxcAlert
          type="info"
          mode="modal"
          onClose={handleVisibility}
          inlineText="Please read the documents carefully before the submission of the data."
        />
      )}
    </DxcInset>
  );
}

() => {
  const [isVisible, changeIsVisible] = useState(false);
  const handleVisibility = () => {
    changeIsVisible(!isVisible);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Show information" onClick={handleVisibility} />
      {isVisible && (
        <DxcAlert
          type="info"
          mode="modal"
          onClose={handleVisibility}
          inlineText="Please read the documents carefully before the submission of the data."
        />
      )}
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Modal

Edit this page on GitHub

Report an issue on GitHub

Accordion

NextApplication Layout

Alert

Props

Examples

Basic usage

Modal

Contents