Alert Dialog

The AlertDialog component is a modal dialog used to display critical information or confirm an action.
It wraps Radix UI's AlertDialog and provides consistent styling with Button support.

import { AlertDialog } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
title	string	required	Title displayed in the dialog header.
description	string	-	Optional description text.
trigger	React.ReactNode	required	The element that triggers the dialog (e.g. a Button).
cancelButtonText	string	"Cancel"	Text label for the cancel button.
actionButtonText	string	"Continue"	Text label for the action button.
actionButtonProps	Partial<ButtonProps>	-	Props passed to the action button.
cancelButtonProps	Partial<ButtonProps>	-	Props passed to the cancel button.
actionButtonIcon	React.ReactNode	-	Optional icon displayed before the action button text.
cancelButtonIcon	React.ReactNode	-	Optional icon displayed before the cancel button text.
buttonsAlignment	"start" | "center" | "end"	"end"	Alignment of the action buttons inside the footer.
buttonsFullWidth	boolean	false	If true, both buttons stretch to fill the footer width.
centered	boolean	false	If true, centers the title and description text.
className	string	-	Additional classes applied to the dialog content.
titleClassName	string	-	Additional classes applied to the dialog title.
descriptionClassName	string	-	Additional classes applied to the dialog description.
open	boolean	-	Controls the open state (useful for controlled dialogs).
isLoading	boolean	false	If true, shows a loading spinner in the action button.
onOpenChange	(open: boolean) => void	-	Callback fired when the dialog open state changes.
onActionClick	() => void	-	Callback fired when the action button is clicked.

Usage

Basic Example

<AlertDialog
  title="Delete Item"
  description="Are you sure you want to delete this item? This action cannot be undone."
  trigger={<Button variant="destructive">Delete</Button>}
/>

With Action & Cancel Text

<AlertDialog
  title="Sign Out"
  description="Do you really want to sign out of your account?"
  trigger={<Button>Sign Out</Button>}
  cancelButtonText="No, stay"
  actionButtonText="Yes, sign out"
/>

With Icons & Loading State

<AlertDialog
  title="Submit Form"
  description="Do you want to submit the form data now?"
  trigger={<Button>Submit</Button>}
  actionButtonText="Submit"
  actionButtonIcon={<SendIcon size={16} />}
  cancelButtonIcon={<XIcon size={16} />}
  isLoading={isSubmitting}
  onActionClick={handleSubmit}
/>

Buttons Alignment

<AlertDialog
  title="Payment Confirmation"
  description="Please confirm your payment details."
  trigger={<Button>Pay</Button>}
  buttonsAlignment="center"
  buttonsFullWidth
/>

Notes

• isLoading disables the action button and shows a spinner (Loader2).
• You can fully customize the buttons via actionButtonProps and cancelButtonProps.