Alert

Ready

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

Code

Usage

Specifications

Props

Name	Default	Description
type: 'info' \| 'confirm' \| 'warning' \| 'error'	`'info'`	Uses on of the available alert types.
mode: 'inline' \| 'modal'	`'inline'`	Uses on of the available alert modes: inline: If onClose function is received, close button will be visible and the function will be executed when it's clicked. There is no overlay layer. Position should be decided by the user. modal: The alert will be displayed in the middle of the screen with an overlay layer behind. The onClose function will be executed when the X button or the overlay is clicked. The user has the responsibility of hidding the modal in the onClose function, otherwise the modal will remain visible.
inlineText: string		Text to display after icon and alert type and before content.
onClose: function		This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
children: node		The details section of the alert. Can be used to render custom content in this area.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent').
tabIndex: number	`0`	Tabindex value given to the close button.

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>
  );
}

Edit this page on GitHub

Accordion

NextApplication layout

Alert

Props

Examples

Basic usage

Modal

Contents