Alert

A modal alert dialog for confirmations, notifications, and destructive actions — with semantic types, footer actions, and an optional hint checkbox.

Overview

Alert renders a modal dialog on top of a Backdrop. It automatically selects an icon based on type, supports optional footer action buttons, and can render a hint message — either as plain text or as a user-acknowledgement checkbox.

Use Alert for confirmations, warnings, and any scenario that requires interrupting the user flow before an action is taken.

Import

import { Alert } from '@unflow.io/ui/components/Alert';

Props

Prop	Type	Default	Description
`type`	`'info' \| 'success' \| 'error' \| 'warning' \| 'destructive'`	`'info'`	Semantic type; controls icon and colour scheme
`open`	`boolean`	—	Controls visibility
`title`	`string`	—	Heading text inside the dialog
`description`	`string`	—	Body text below the title
`footerActions`	`FooterAction[]`	—	Array of buttons rendered in the footer
`icon`	`ReactNode`	—	Custom icon; overrides the default type-based icon
`onClose`	`() => void`	—	Called when the close button or backdrop is clicked
`hint`	`string`	—	Optional hint message rendered in the footer area
`isHintCheckbox`	`boolean`	—	When `true`, renders `hint` as a checkbox instead of plain text
`disablePortal`	`boolean`	—	Render relative to parent instead of `document.body`
`autoFocus`	`boolean`	—	Move focus into the dialog when it opens
`children`	`ReactNode`	—	Custom content rendered inside the body, alongside `description`

FooterAction extends the Button props with an adjusted onClick:

type FooterAction = Omit<IButton, 'onClick'> & {
  onClick?: (e: MouseEvent, hintChecked?: boolean) => void;
};

Types

Five semantic types are available. Each maps to a distinct icon and colour.

<Alert type="info"        title="..." description="..." open onClose={close} footerActions={actions} />
<Alert type="success"     title="..." description="..." open onClose={close} footerActions={actions} />
<Alert type="error"       title="..." description="..." open onClose={close} footerActions={actions} />
<Alert type="warning"     title="..." description="..." open onClose={close} footerActions={actions} />
<Alert type="destructive" title="..." description="..." open onClose={close} footerActions={actions} />

Type	Icon	Colour
`info`	Info (fill)	Blue
`success`	Valid (fill)	Green
`error`	Error (fill)	Red
`warning`	Invalid (fill)	Yellow
`destructive`	Trash (fill)	Red

Pass an array of footerActions to render buttons in the footer. Each entry accepts all Button props plus an extended onClick(e, hintChecked) signature — the second argument reflects the current state of the hint checkbox (useful for guarding destructive actions behind acknowledgement).

<Alert
  type="warning"
  open={open}
  title="Publish changes"
  description="These changes will be visible to all users immediately."
  onClose={() => setOpen(false)}
  footerActions={[
    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
    { label: 'Publish', onClick: () => setOpen(false) },
  ]}
/>

Hint

Add a hint string to render a plain acknowledgement note in the footer. Useful for surfacing legal disclaimers or non-blocking reminders.

<Alert
  type="warning"
  open={open}
  title="Confirm this action"
  description="This action will affect all records in the selected period."
  hint="I understand the consequences of this action."
  onClose={() => setOpen(false)}
  footerActions={[
    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
    { label: 'Confirm', onClick: () => setOpen(false) },
  ]}
/>

Checkbox hint

Set isHintCheckbox to render hint as a checkbox the user must actively check. The checked state is forwarded as the second argument to each footerAction.onClick, so you can guard the confirm button's logic behind it.

<Alert
  type="destructive"
  open={open}
  title="Delete records"
  description="This will permanently delete the selected records. This action cannot be undone."
  hint="I understand that this action is irreversible."
  isHintCheckbox
  onClose={() => setOpen(false)}
  footerActions={[
    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
    {
      label: 'Delete',
      variant: 'destructive',
      onClick: (e, hintChecked) => {
        if (!hintChecked) return;
        setOpen(false);
      },
    },
  ]}
/>

Custom content

Use children to render arbitrary content inside the body alongside or instead of description.

<Alert
  type="info"
  open={open}
  title="Review before confirming"
  onClose={() => setOpen(false)}
  footerActions={[
    { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
    { label: 'Confirm', onClick: () => setOpen(false) },
  ]}
>
  <ul className="text-sm text-grey-600 list-disc pl-4 space-y-1">
    <li>5 records will be updated</li>
    <li>Change will apply to all environments</li>
  </ul>
</Alert>

Customization (slotProps)

Slot	Props	Description
`head`	`BaseHTMLProps<HTMLDivElement>`	Header row container (icon + title + close button)
`closeButton`	`Omit<IIconButton, 'onClick'>`	Close icon button
`icon`	`BaseHTMLProps<HTMLDivElement>`	Icon wrapper element
`title`	`BaseHTMLProps<HTMLParagraphElement>`	Title text element
`body`	`BaseHTMLProps<HTMLDivElement>`	Body container
`description`	`BaseHTMLProps<HTMLParagraphElement>`	Description text element
`hintText`	`BaseHTMLProps<HTMLParagraphElement>`	Hint label text
`hintCheckbox`	`BaseHTMLProps<HTMLDivElement>`	Checkbox indicator element
`footer`	`BaseHTMLProps<HTMLDivElement>`	Footer container

Accessibility

Renders a <div role="alertdialog"> that conforms to the ARIA dialog pattern.
Focus is trapped inside the dialog while open (via the underlying Backdrop and ClickAwayEvent).
Clicking outside the dialog or pressing Esc triggers onClose.
The close button is always visible and reachable by keyboard.
Provide a meaningful title so screen readers can announce the dialog purpose when focus enters.