Alert

An Alert makes the user confirm or acknowledge something before they continue. Use it for destructive actions and critical notices. For everything else, use a Dialog.

Usage#

import { Alert } from "@clawscale/react";

Alert is controlled with isOpen. Handle onConfirm and onCancel separately, or both in onClose, which receives true when the user confirmed.

By default, only the buttons close an alert. Escape and clicks outside do nothing.

Examples#

Confirm a destructive action#

cancelButtonText adds a cancel button. intent colors the confirm button and the icon.

core/alert/basic.tsx

import { Alert, Button } from "@clawscale/react";
import { useState } from "react";

export default function AlertBasic() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button icon="trash" intent="danger" text="Delete dataset" onClick={() => setIsOpen(true)} />
      <Alert
        cancelButtonText="Cancel"
        confirmButtonText="Delete dataset"
        icon="trash"
        intent="danger"
        isOpen={isOpen}
        onCancel={() => setIsOpen(false)}
        onConfirm={() => setIsOpen(false)}
      >
        <p>
          Delete <strong>orders_daily</strong>? It holds 1,284,112 rows and 14 views read from it. You cannot undo this.
        </p>
      </Alert>
    </>
  );
}

Loading#

loading puts the confirm button in its loading state and disables the cancel button. Keep the alert open until the request finishes.

core/alert/loading.tsx

import { Alert, Button } from "@clawscale/react";
import { useState } from "react";

export default function AlertLoading() {
  const [isOpen, setIsOpen] = useState(false);
  const [isStopping, setIsStopping] = useState(false);

  const stopRollout = () => {
    setIsStopping(true);
    // Stands in for the request that stops the rollout.
    setTimeout(() => {
      setIsStopping(false);
      setIsOpen(false);
    }, 1500);
  };

  return (
    <>
      <Button icon="stop" text="Stop rollout" onClick={() => setIsOpen(true)} />
      <Alert
        cancelButtonText="Keep running"
        confirmButtonText="Stop rollout"
        icon="warning-sign"
        intent="warning"
        isOpen={isOpen}
        loading={isStopping}
        onCancel={() => setIsOpen(false)}
        onConfirm={stopRollout}
      >
        <p>Stop the api-gateway v2.14.0 rollout? 3 of 8 regions already run the new version.</p>
      </Alert>
    </>
  );
}

Escape and outside clicks#

canEscapeKeyCancel and canOutsideClickCancel let users dismiss the alert with escape or a click outside. Both count as a cancel.

core/alert/dismiss.tsx

import { Alert, Button } from "@clawscale/react";
import { useState } from "react";

export default function AlertDismiss() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button icon="database" text="Check storage" onClick={() => setIsOpen(true)} />
      <Alert
        canEscapeKeyCancel
        canOutsideClickCancel
        confirmButtonText="Got it"
        icon="database"
        intent="primary"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <p>The eu-west-1 workspace reached its 2 TB storage quota. New ingests wait until you free space.</p>
      </Alert>
    </>
  );
}

Props interface#

interface AlertProps extends OverlayLifecycleProps, Props@clawscale/react

Props	Description
`cancelButtonText`	`string` The text for the cancel button. If this prop is defined, then either `onCancel` or `onClose` must also be defined.
`canEscapeKeyCancel`	`boolean` = `false` Whether 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.
`canOutsideClickCancel`	`boolean` = `false` Whether clicking outside the Alert should cancel the alert. If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
`children`	`React.ReactNode` Dialog contents.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`confirmButtonText`	`string` = `"OK"` The text for the confirm (right-most) button. This button will always appear, and uses the value of the `intent` prop below.
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to display on the left side.
`intent`	`Intent` The intent to be applied to the confirm (right-most) button and the icon (if provided).
`isOpen`required	`boolean` Toggles the visibility of the alert. This prop is required because the component is controlled.
`loading`	`boolean` = `false` If set to `true`, the confirm button will be set to its loading state. The cancel button, if visible, will be disabled.
`onCancel`	`(event?: React.SyntheticEvent<HTMLElement>) => void` Handler invoked when the alert is canceled. Alerts can be canceled in the following ways: - clicking the cancel button (if `cancelButtonText` is defined) - pressing the escape key (if `canEscapeKeyCancel` is enabled) - clicking on the overlay backdrop (if `canOutsideClickCancel` is enabled)
`onClose`	`(confirmed: boolean, event?: React.SyntheticEvent<HTMLElement>) => void` Handler invoked when the Alert is confirmed or canceled; see `onConfirm` and `onCancel` for more details. First argument is `true` if confirmed, `false` otherwise. This is an alternative to defining separate `onConfirm` and `onCancel` handlers.
`onClosed`	`(node: HTMLElement) => void` Lifecycle 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. Inherited from `OverlayLifecycleProps`
`onClosing`	`(node: HTMLElement) => void` Lifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed. Inherited from `OverlayLifecycleProps`
`onConfirm`	`(event?: React.SyntheticEvent<HTMLElement>) => void` Handler invoked when the confirm button is clicked. Alerts can be confirmed in the following ways: - clicking the confirm button - focusing on the confirm button and pressing `enter` or `space`
`onOpened`	`(node: HTMLElement) => void` Lifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened. Inherited from `OverlayLifecycleProps`
`onOpening`	`(node: HTMLElement) => void` Lifecycle 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. Inherited from `OverlayLifecycleProps`
`portalContainer`	`HTMLElement` = `document.body` The container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
`style`	`React.CSSProperties` CSS styles to apply to the alert.
`transitionDuration`	`number` = `300` Indicates 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.