Alert

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

Props

NameTypeDescriptionDefault
type'info' | 'confirm' | 'warning' | 'error'Uses one of the available alert types.'info'
mode'inline' | 'modal'Uses one of the available alert modes:
  • inline: If an onClose prop 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 hiding the modal in the onClose event, otherwise the modal will remain visible.
'inline'
inlineTextstringMessage of the alert.-
onClose() => voidThis function will be called when the user clicks the close button. If there is no function we should close the alert by default.-
childrenReact.ReactNodeThe details section of the alert. Can be used to render custom content in this area.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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'
tabIndexnumberValue of the tabindex attribute applied to the close button.0

Examples

Basic usage

Modal