Alert

Introduction

Alerts notify users of important information and force them to acknowledge the alert content before continuing.

Although similar to dialogs, alerts are more restrictive and should only be used for important information. By default, the user can only exit the alert by clicking one of the confirmation buttons—clicking the overlay or pressing the esc key will not close the alert. These interactions can be enabled via props.

Examples

Usage

Alert

import React from "react";
import { Alert } from "@commure/components-foundation";
class MyAlert extends React.Component {
constructor() {
this.state = {
isOpen: false
};
this.closeAlert = this.closeAlert.bind(this);
this.openAlert = this.openAlert.bind(this);
}
closeAlert() {
this.setState({
isOpen: false
});
}
openAlert() {
this.setState({
isOpen: true
});
}
render() {
return (
<div>
<Button onClick={this.openAlert}>Show Alert</Button>
<Alert
isOpen={this.state.isOpen}
confirmButtonTest="Okay"
cancelButtonText="Cancel me"
onClose={this.closeAlert}
>
<p>This is an alert. Please press Okay to make me go away.</p>
</Alert>
</div>
);
}
}
export default MyAlert;

API Reference

Alert

Prop NameRequired?TypeDescription
canEscapeKeyCancelfalsebooleanWhether pressing <kbd>escape</kbd> when focused on the Alert should cancel the alert. If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
canOutsideClickCancelfalsebooleanWhether clicking outside the Alert should cancel the alert. If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
cancelButtonTextfalsestringThe text for the cancel button. If this prop is defined, then either `onCancel` or `onClose` must also be defined.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
confirmButtonTextfalsestringThe text for the confirm (right-most) button. This button will always appear, and uses the value of the `intent` prop below.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to display on the left side.
intentfalseIntentThe intent to be applied to the confirm (right-most) button.
isOpentruebooleanToggles the visibility of the alert. This prop is required because the component is controlled.
onClosedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.
onClosingfalse(node: HTMLElement) => voidLifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.
onOpenedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.
onOpeningfalse(node: HTMLElement) => voidLifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.
portalContainerfalseHTMLElementThe container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
stylefalseCSSPropertiesCSS styles to apply to the alert.
transitionDurationfalsenumberIndicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.

Related Reading

Blueprint Reference