AlertDialog

A modal dialog that interrupts the user with important content and expects a response.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Show Dialog
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the draft
            order from your account.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Composition

Use the following composition to build an AlertDialog:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">Show Dialog</Button>}
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the draft
            order and remove its line items from your account.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Small

Use the size="sm" prop to make the alert dialog smaller.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">Show Dialog</Button>}
      />
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Allow branch to edit this order?</AlertDialogTitle>
          <AlertDialogDescription>
            Do you want to allow the assigned branch to make changes to this
            order?
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
          <AlertDialogAction>Allow</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Media

Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  CircleFadingPlusIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">Share Report</Button>}
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia>
            <CircleFadingPlusIcon />
          </AlertDialogMedia>
          <AlertDialogTitle>Share this report?</AlertDialogTitle>
          <AlertDialogDescription>
            Anyone with the link will be able to view and edit this report.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Share</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  StoreIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">Show Dialog</Button>}
      />

      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <StoreIcon />
          </AlertDialogMedia>
          <AlertDialogTitle>Allow branch to edit this order?</AlertDialogTitle>
          <AlertDialogDescription>
            Do you want to allow the assigned branch to make changes to this
            order?
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
          <AlertDialogAction>Allow</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Destructive

Use the AlertDialogAction component to add a destructive action button to the alert dialog.

Code

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  Trash2Icon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="destructive">Delete Quote</Button>}
      />
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia className="tw:bg-destructive/10 tw:text-destructive">
            <Trash2Icon />
          </AlertDialogMedia>
          <AlertDialogTitle>Delete quote?</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently delete this quote. View{" "}
            <a href="#">Quote History</a> for previously submitted quotes.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel variant="outline">Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

API

AlertDialog

Groups an alert dialog’s parts. Open it with a nested AlertDialogTrigger or the open/defaultOpen props; there is no detached-trigger or imperative API.

Props

children

children?: React.ReactNode

The content of the dialog.

defaultOpen

defaultOpen?: boolean

Whether the dialog is initially open. To render a controlled dialog, use the open prop instead.

defaultTriggerId

defaultTriggerId?: string | null

ID of the trigger associated with an initially open dialog.

onOpenChange

onOpenChange?: ((open: boolean, eventDetails: AlertDialogPrimitive.Root.ChangeEventDetails) => void)

Event handler called when the alert dialog is opened or closed.

onOpenChangeComplete

onOpenChangeComplete?: ((open: boolean) => void)

Event handler called after animations complete when the alert dialog is opened or closed.

open

open?: boolean

Whether the dialog is currently open.

triggerId

triggerId?: string | null

ID of the trigger associated with a controlled dialog.

AlertDialogAction

A Falcon Button for the alert dialog’s confirmed action. It accepts standard Button props and does not close the dialog automatically.

Props

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

size

size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null

Controls the button’s size. The icon sizes are square and are for buttons whose only child is an icon.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

variant

variant?: "outline" | "link" | "secondary" | "default" | "ghost" | "destructive" | null

Controls the button’s appearance only, never its behavior. The link variant looks like a link without rendering one.

AlertDialogCancel

Closes the alert dialog. Renders a Button and accepts standard Button props.

Props

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

size

size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null = "default"

Controls the button’s size. The icon sizes are square and are for buttons whose only child is an icon.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

variant

variant?: "outline" | "link" | "secondary" | "default" | "ghost" | "destructive" | null = "outline"

Controls the button’s appearance only, never its behavior. The link variant looks like a link without rendering one.

AlertDialogContent

Includes the portal and backdrop. Renders a <div> element and accepts standard <div> props. Use render to replace the element. Use it with an AlertDialogTitle and AlertDialogDescription so the dialog has an accessible name and description.

Props

className

className?: string

CSS class applied to the dialog.

finalFocus

finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)

Determines the element to focus when the dialog is closed.

initialFocus

initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)

Determines the element to focus when the dialog is opened.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPopupState>

Allows you to replace the dialog’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

size

size?: "sm" | "default" = "default"

Controls the alert dialog’s layout size.

style

style?: React.CSSProperties | ((state: DialogPopupState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the dialog’s state.

AlertDialogDescription

Provides the alert dialog’s accessible description. Renders a <p> element and accepts standard <p> props. Use render to replace the element.

Props

className

className?: string

CSS class applied to the element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: DialogDescriptionState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialogFooter

Contains alert dialog actions. Renders a <div> element and accepts standard <div> props.

AlertDialogHeader

Groups AlertDialogTitle and AlertDialogDescription. Renders a <div> element and accepts standard <div> props.

AlertDialogMedia

Contains an icon or other visual context. Renders a <div> element and accepts standard <div> props.

AlertDialogTitle

Provides the alert dialog’s accessible name. Renders an <h2> element and accepts standard <h2> props. Use render to replace the element.

Props

className

className?: string

CSS class applied to the element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: DialogTitleState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialogTrigger

Opens the associated alert dialog. Renders a <button> element and accepts standard <button> props. Use render to replace the element.

Props

className

className?: string | ((state: DialogTriggerState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on its state.

id

id?: string

ID of the trigger. In addition to being forwarded to the rendered element, it identifies the active trigger in controlled mode with triggerId.

nativeButton

nativeButton?: boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: DialogTriggerState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.