Alert Dialog

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

Show Dialog

Installation

npm

npx @galaxy-stack/nebula-cli@latest add alert-dialog

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add alert-dialog

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add alert-dialog

bun

bunx @galaxy-stack/nebula-cli@latest add alert-dialog

global

# If you have installed galaxy-design globally
galaxy-design add alert-dialog

Usage

React

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
} from "@/components/ui/alert-dialog"

export default function App() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Delete</AlertDialogAction>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Vue

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
} from '@/components/ui/alert-dialog'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger asChild>
      <Button variant="destructive">Delete Account</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogContent>
  </AlertDialog>
</template>

Angular

import { Component } from '@angular/core';
import { AlertDialogComponent } from '@/components/ui/alert-dialog';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AlertDialogComponent],
  template: `
    <ui-alert-dialog [open]="isOpen" (openChange)="isOpen = $event">
      <ui-alert-dialog-trigger>
        <button variant="destructive">Delete Account</button>
      </ui-alert-dialog-trigger>
      <ui-alert-dialog-content>
        <ui-alert-dialog-title>Are you sure?</ui-alert-dialog-title>
        <ui-alert-dialog-description>
          This action cannot be undone.
        </ui-alert-dialog-description>
        <button (click)="isOpen = false">Cancel</button>
        <button (click)="handleDelete()">Delete</button>
      </ui-alert-dialog-content>
    </ui-alert-dialog>
  `
})
export class AppComponent {
  isOpen = false;

  handleDelete() {
    // Handle delete action
    this.isOpen = false;
  }
}

React Native

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
} from '@/components/ui/alert-dialog'
import { Button, ButtonText } from '@/components/ui/button'

export default function App() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">
          <ButtonText>Delete Account</ButtonText>
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
        <AlertDialogCancel>
          <ButtonText>Cancel</ButtonText>
        </AlertDialogCancel>
        <AlertDialogAction>
          <ButtonText>Delete</ButtonText>
        </AlertDialogAction>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Flutter

import 'package:flutter/material.dart';
import 'package:galaxy_design/galaxy_alert_dialog.dart';

class AlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GalaxyButton(
      variant: GalaxyButtonVariant.destructive,
      onPressed: () {
        GalaxyAlertDialog.show(
          context: context,
          title: 'Are you sure?',
          description: 'This action cannot be undone.',
          cancelText: 'Cancel',
          confirmText: 'Delete',
          onConfirm: () {
            // Handle delete action
          },
        );
      },
      child: const Text('Delete Account'),
    );
  }
}

API Reference

Props

Prop	Type	Default	Description	Frameworks
open	boolean	-	Controlled open state	React, Vue, Angular
defaultOpen	boolean	false	Initial open state for uncontrolled usage	React, Vue, Angular
onOpenChange / update:open	(open: boolean) => void	-	Called when the open state changes	React (onOpenChange), Vue (update:open), Angular
title	string	-	Optional title text	Flutter only
description	string	-	Optional description text	Flutter only
cancelText	string	'Cancel'	Cancel button text	Flutter only
confirmText	string	'Confirm'	Confirm button text	Flutter only
variant	'default' | 'destructive'	'default'	Visual style variant	Flutter only
padding	EdgeInsetsGeometry	-	Padding inside the alert container	Flutter only

Sub-components

AlertDialogTrigger

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render the trigger as a child element	React, Vue
as	AsTag | Component	'button'	Element or component to render	Vue only

AlertDialogContent

Prop	Type	Default	Description	Frameworks
forceMount	boolean	-	Force-mount the content even when closed	React, Vue
className / class	string	-	CSS class names	React (className), Vue (class)
onOpenAutoFocus	(event: Event) => void	-	Called when focus moves into the alert dialog after opening	React only
onCloseAutoFocus	(event: Event) => void	-	Called when focus returns after closing	React only

Vue

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
} from '@/components/ui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogContent>
  </AlertDialog>
</template>

React

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
} from '@/components/ui'

export default function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Delete</AlertDialogAction>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Angular

import { Component } from '@angular/core';
import { AlertDialogComponent } from '@/components/ui';

@Component({
  selector: 'app-alert-dialog-demo',
  standalone: true,
  imports: [AlertDialogComponent],
  template: `
    <ui-alert-dialog [isOpen]="isOpen" (openChange)="isOpen = $event">
      <h2>Are you sure?</h2>
      <p>This action cannot be undone.</p>
      <button (click)="isOpen = false">Cancel</button>
      <button (click)="handleDelete()">Delete</button>
    </ui-alert-dialog>
  `
})
export class AlertDialogDemoComponent {
  isOpen = false;

  handleDelete() {
    this.isOpen = false;
    // Handle delete
  }
}

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)