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


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: stringText to display after icon and alert type and before content.
onClose: functionThis function will be called when the user clicks the close button. If there is no function we should close the alert by default.
children: nodeThe details section of the alert. Can be used to render custom content in this area.
margin: string | objectSize 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: number0Tabindex value given to the close button.


Basic usage