Alert Dialog

A neo-brutalist confirmation dialog that requires user interaction. Built on top of reka-ui's AlertDialog primitive.

Demo

Preview

Installation

pnpm dlx brutx-vue@latest add alert-dialog

Usage

<script setup>
import { AlertDialogRoot as AlertDialog, AlertDialogTrigger } from 'reka-ui'
import { AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'
</script>

<template>
    <AlertDialog>
        <AlertDialogTrigger as-child>
            <Button variant="danger">Delete Account</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription>
                    This action cannot be undone. This will permanently delete your account and remove your data.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction>Continue</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>

Sub-components

Component	Description
AlertDialog	Root component (import directly from reka-ui: import { AlertDialogRoot as AlertDialog } from 'reka-ui')
AlertDialogTrigger	Button that opens the dialog (import directly from reka-ui: import { AlertDialogTrigger } from 'reka-ui')
AlertDialogPortal	Portal component (import directly from reka-ui: import { AlertDialogPortal } from 'reka-ui')
AlertDialogContent	Dialog content panel
AlertDialogHeader	Header container for title and description
AlertDialogFooter	Footer container for action buttons
AlertDialogTitle	Dialog title
AlertDialogDescription	Dialog description text
AlertDialogAction	Confirm action button
AlertDialogCancel	Cancel button that closes the dialog

API Reference

AlertDialogContent

AlertDialogContent — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the dialog content panel.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogContent.vue:19 packages/ui/src/components/alert-dialog/AlertDialogContent.vue
overlayClass Nullable	ClassValue	—	Additional CSS classes merged into the overlay for styling its backdrop.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogContent.vue:21 packages/ui/src/components/alert-dialog/AlertDialogContent.vue

AlertDialogContent — Slots

Name	Signature or type	Description
#default	{}	The dialog panel content, usually composing a title, description, and action buttons; it is rendered through the built-in Portal.
Details Declared type {} Source AlertDialogContent.vue packages/ui/src/components/alert-dialog/AlertDialogContent.vue

AlertDialogAction

AlertDialogAction — Props

Name	Type	Default	Description
variant	"accent" | "danger" | "default" | "ghost" | "link" | "outline" | "primary" | "secondary" | "success" | undefined	"default"	The action button’s color, border, and interaction-state style variant.
Details Declared type NonNullable<"default" | "ghost" | "primary" | "secondary" | "success" | "danger" | "accent" | "outline" | "link" | null | undefined> | undefined Literal values "accent" "danger" "default" "ghost" "link" "outline" "primary" "secondary" "success" Default value details Declaration 'default' Source: packages/ui/src/components/alert-dialog/AlertDialogAction.vue Resolved value "default" Source AlertDialogAction.vue:14 packages/ui/src/components/alert-dialog/AlertDialogAction.vue
class Nullable	ClassValue	undefined	Additional CSS classes merged into the action button root.
Details Declared type ClassValue Literal values false null true Default value details Declaration undefined Source: packages/ui/src/components/alert-dialog/AlertDialogAction.vue Resolved value undefined Source AlertDialogAction.vue:15 packages/ui/src/components/alert-dialog/AlertDialogAction.vue
asChild	boolean | undefined	undefined Runtime fallback:When omitted, the underlying Primitive uses false.	Merges root props, styles, and closure behavior into the single default-slot child, which must retain accessible button interaction.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/alert-dialog/AlertDialogAction.vue Resolved value undefined Runtime fallback When omitted, the underlying Primitive uses false. Applied by the component under the documented runtime conditions. Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
as	AsTag | Component | undefined	undefined Runtime fallback:When omitted, Reka AlertDialogAction renders a button.	Selects the root tag or component; asChild uses the child from the default slot instead.
Details Declared type AsTag | Component | undefined Literal values "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" Default value details Declaration undefined Source: packages/ui/src/components/alert-dialog/AlertDialogAction.vue Resolved value undefined Runtime fallback When omitted, Reka AlertDialogAction renders a button. Applied by the component under the documented runtime conditions. Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
disabled	Booleanish | undefined	—	Disables normal user activation of a native button. A custom root element must implement its own disabled behavior.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
dir	string | undefined	—	Sets the text direction of the root element, such as ltr, rtl, or auto.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
type	"button" | "submit" | "reset" | undefined	— Runtime fallback:When omitted and the Reka primitive uses as="button", the underlying DialogClose supplies type="button".	Selects native button behavior: a regular button, form submission, or form reset.
Details Declared type "button" | "submit" | "reset" | undefined Literal values "button" "reset" "submit" Default value details Not declared — Runtime fallback When omitted and the Reka primitive uses as="button", the underlying DialogClose supplies type="button". Applied by the component under the documented runtime conditions. Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
form	string | undefined	—	Associates the button with a form by its element ID, including a form outside its DOM ancestors.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
value	string | number | readonly string[] | undefined	—	The value included with name in form data when this button is the submitter. Visible button text comes from the default slot.
Details Declared type string | number | readonly string[] | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
id	string | undefined	—	The root element’s DOM ID, used by label references, selectors, and fragment links.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCopy	((payload: ClipboardEvent) => void) | undefined	—	Handles copy operations with access to clipboard data through ClipboardEvent.
Details Declared type ((payload: ClipboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCut	((payload: ClipboardEvent) => void) | undefined	—	Handles cut operations and can customize clipboard content through ClipboardEvent.
Details Declared type ((payload: ClipboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPaste	((payload: ClipboardEvent) => void) | undefined	—	Handles paste operations and exposes incoming clipboard content through ClipboardEvent.
Details Declared type ((payload: ClipboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCompositionend	((payload: CompositionEvent) => void) | undefined	—	Handles the end or cancellation of an IME composition session on an editable root.
Details Declared type ((payload: CompositionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCompositionstart	((payload: CompositionEvent) => void) | undefined	—	Handles the start of an IME composition session on an editable root.
Details Declared type ((payload: CompositionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCompositionupdate	((payload: CompositionEvent) => void) | undefined	—	Handles changes to IME composition text on an editable root.
Details Declared type ((payload: CompositionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDrag	((payload: DragEvent) => void) | undefined	—	Handles repeated drag events on the source during native drag and drop.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragend	((payload: DragEvent) => void) | undefined	—	Handles the end of native dragging, including successful drops and cancellation.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragenter	((payload: DragEvent) => void) | undefined	—	Handles a dragged element or text entering the drop target.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragexit	((payload: DragEvent) => void) | undefined	—	Handles the legacy dragexit event when an element ceases to be the immediate drag target; dispatch depends on browser support.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragleave	((payload: DragEvent) => void) | undefined	—	Handles a dragged element or text leaving the drop target.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragover	((payload: DragEvent) => void) | undefined	—	Handles dragging over a drop target; accepting a drop typically requires preventDefault().
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDragstart	((payload: DragEvent) => void) | undefined	—	Handles the start of native dragging and can populate DragEvent.dataTransfer.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDrop	((payload: DragEvent) => void) | undefined	—	Handles a drop on a valid target and exposes transferred data through dataTransfer.
Details Declared type ((payload: DragEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFocus	((payload: FocusEvent) => void) | undefined	—	Handles the root gaining focus; native focus events do not bubble.
Details Declared type ((payload: FocusEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFocusin	((payload: FocusEvent) => void) | undefined	—	Handles bubbling focus-in events from the root or its descendants.
Details Declared type ((payload: FocusEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFocusout	((payload: FocusEvent) => void) | undefined	—	Handles bubbling focus-out events from the root or its descendants.
Details Declared type ((payload: FocusEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onBlur	((payload: FocusEvent) => void) | undefined	—	Handles the root losing focus; native blur events do not bubble.
Details Declared type ((payload: FocusEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onChange	((payload: Event) => void) | undefined	—	Handles committed value changes from an input or selection control; activating a regular button does not produce this event.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onBeforeinput	((payload: InputEvent) => void) | undefined	—	Handles impending user edits to editable content on a supporting root element.
Details Declared type ((payload: InputEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFormdata	((payload: FormDataEvent) => void) | undefined	—	Handles completion of form-data construction on a form root element.
Details Declared type ((payload: FormDataEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onInput	((payload: InputEvent) => void) | undefined	—	Handles user-driven value changes on an editable root element.
Details Declared type ((payload: InputEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onReset	((payload: Event) => void) | undefined	—	Handles a form reset on a form root; the event is dispatched on the form.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSubmit	((payload: SubmitEvent) => void) | undefined	—	Handles submission on a form root; a regular submit button causes its owning form to dispatch this event.
Details Declared type ((payload: SubmitEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onInvalid	((payload: Event) => void) | undefined	—	Handles failed constraint validation on a supporting root control; native invalid events do not bubble.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFullscreenchange	((payload: Event) => void) | undefined	—	Handles fullscreen-state changes when the root or a descendant enters or leaves fullscreen.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onFullscreenerror	((payload: Event) => void) | undefined	—	Handles a failed fullscreen request from the root or a descendant.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onLoad	((payload: Event) => void) | undefined	—	Handles completed resource loading when the root is an element that supports load events.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onError	((payload: Event) => void) | undefined	—	Handles root resource failures, such as image or media errors; it is not a handler for arbitrary Vue component exceptions.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onKeydown	((payload: KeyboardEvent) => void) | undefined	—	Handles key presses, including browser-generated repeats while a key remains held.
Details Declared type ((payload: KeyboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onKeypress	((payload: KeyboardEvent) => void) | undefined	—	Handles the deprecated keypress character-key event; use keydown or beforeinput for new keyboard interactions.
Details Declared type ((payload: KeyboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onKeyup	((payload: KeyboardEvent) => void) | undefined	—	Handles the release of a keyboard key.
Details Declared type ((payload: KeyboardEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDblclick	((payload: MouseEvent) => void) | undefined	—	Handles a completed double-click with the primary mouse button.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMousedown	((payload: MouseEvent) => void) | undefined	—	Handles a mouse button being pressed over the element.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMouseenter	((payload: MouseEvent) => void) | undefined	—	Handles the mouse entering the element’s boundary; unlike mouseover, it does not bubble.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMouseleave	((payload: MouseEvent) => void) | undefined	—	Handles the mouse leaving the element and its descendants; this event does not bubble.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMousemove	((payload: MouseEvent) => void) | undefined	—	Handles mouse movement over the element.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMouseout	((payload: MouseEvent) => void) | undefined	—	Handles bubbling mouse-out events when leaving the current hit target, including movement into a child.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMouseover	((payload: MouseEvent) => void) | undefined	—	Handles bubbling mouse-over events when entering the current hit target.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onMouseup	((payload: MouseEvent) => void) | undefined	—	Handles a mouse button being released over the element.
Details Declared type ((payload: MouseEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAbort	((payload: UIEvent) => void) | undefined	—	Handles aborted loading on a media root when the interruption is not caused by a loading error.
Details Declared type ((payload: UIEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCanplay	((payload: Event) => void) | undefined	—	Handles a media root becoming able to start playback without assurance of uninterrupted playback to the end.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onCanplaythrough	((payload: Event) => void) | undefined	—	Handles the browser estimating that a media root can play through without pausing to buffer.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onDurationchange	((payload: Event) => void) | undefined	—	Handles a change to the media root’s duration information.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onEmptied	((payload: Event) => void) | undefined	—	Handles a media root returning from a loaded state to an empty state, such as when reloading.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onEncrypted	((payload: MediaEncryptedEvent) => void) | undefined	—	Handles encrypted initialization data encountered by a media root through MediaEncryptedEvent.
Details Declared type ((payload: MediaEncryptedEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onEnded	((payload: Event) => void) | undefined	—	Handles a media root reaching the end of playback and stopping.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onLoadeddata	((payload: Event) => void) | undefined	—	Handles the first loading of data at the media root’s current playback position, usually the first frame.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onLoadedmetadata	((payload: Event) => void) | undefined	—	Handles a media root’s metadata becoming available, such as duration or video dimensions.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onLoadstart	((payload: Event) => void) | undefined	—	Handles a media root beginning to load its resource.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPause	((payload: Event) => void) | undefined	—	Handles a media root entering the paused state.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPlay	((payload: Event) => void) | undefined	—	Handles a media root’s paused state becoming false when playback is requested.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPlaying	((payload: Event) => void) | undefined	—	Handles a media root actually starting or resuming playback.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onProgress	((payload: ProgressEvent<EventTarget>) => void) | undefined	—	Handles data-loading progress on a root that emits resource progress events, such as a media element.
Details Declared type ((payload: ProgressEvent<EventTarget>) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onRatechange	((payload: Event) => void) | undefined	—	Handles a change to the media root’s playback rate.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSeeked	((payload: Event) => void) | undefined	—	Handles a media root completing a seek to a playback position.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSeeking	((payload: Event) => void) | undefined	—	Handles a media root beginning to seek to a new playback position.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onStalled	((payload: Event) => void) | undefined	—	Handles a media root still attempting to fetch data when delivery unexpectedly stops.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSuspend	((payload: Event) => void) | undefined	—	Handles the browser intentionally suspending data fetching for a media root.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTimeupdate	((payload: Event) => void) | undefined	—	Handles updates to a media root’s currentTime.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onVolumechange	((payload: Event) => void) | undefined	—	Handles changes to a media root’s volume or muted state.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onWaiting	((payload: Event) => void) | undefined	—	Handles a media root waiting to continue playback because data is temporarily unavailable.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSelect	((payload: Event) => void) | undefined	—	Handles text selection in an input root that supports text selection.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onScroll	((payload: Event) => void) | undefined	—	Handles changes to the scroll position of a scrollable root.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onScrollend	((payload: Event) => void) | undefined	—	Handles scrolling finishing on a scrollable root once the associated scrolling gesture has ended.
Details Declared type ((payload: Event) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTouchcancel	((payload: TouchEvent) => void) | undefined	—	Handles the browser or device interrupting a sequence of touch contacts.
Details Declared type ((payload: TouchEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTouchend	((payload: TouchEvent) => void) | undefined	—	Handles one or more touch contacts leaving the touch surface.
Details Declared type ((payload: TouchEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTouchmove	((payload: TouchEvent) => void) | undefined	—	Handles touch contacts moving across the touch surface.
Details Declared type ((payload: TouchEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTouchstart	((payload: TouchEvent) => void) | undefined	—	Handles one or more touch contacts beginning on the touch surface.
Details Declared type ((payload: TouchEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAuxclick	((payload: PointerEvent) => void) | undefined	—	Handles a completed click with a non-primary pointing-device button, such as the middle mouse button.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onClick	((payload: PointerEvent) => void) | undefined	—	Handles native activation clicks, typically from a mouse, touch, or keyboard; Reka’s click handler also requests dialog closure. An asynchronous callback does not make AlertDialogAction wait for completion; use controlled open state on AlertDialogRoot when application logic must manage closure.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onContextmenu	((payload: PointerEvent) => void) | undefined	—	Handles a request to open a context menu, such as a right-click or the context-menu key.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onGotpointercapture	((payload: PointerEvent) => void) | undefined	—	Handles the element gaining capture of a pointer so subsequent pointer events target it.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onLostpointercapture	((payload: PointerEvent) => void) | undefined	—	Handles the element losing capture of a pointer.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerdown	((payload: PointerEvent) => void) | undefined	—	Handles a pointer becoming active, such as touch contact or the first mouse-button press.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointermove	((payload: PointerEvent) => void) | undefined	—	Handles changes to pointer position or properties such as pressure.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerup	((payload: PointerEvent) => void) | undefined	—	Handles a pointer leaving its active pressed state.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointercancel	((payload: PointerEvent) => void) | undefined	—	Handles the browser cancelling pointer interaction, such as when taking over a touch-scrolling gesture.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerenter	((payload: PointerEvent) => void) | undefined	—	Handles a pointer entering the hit boundaries of the element or its descendants; it does not bubble.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerleave	((payload: PointerEvent) => void) | undefined	—	Handles a pointer leaving the hit boundaries of the element and its descendants; it does not bubble.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerover	((payload: PointerEvent) => void) | undefined	—	Handles bubbling pointer-over events when a pointer enters the current hit target.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onPointerout	((payload: PointerEvent) => void) | undefined	—	Handles bubbling pointer-out events when leaving the current hit target, including movement into a child.
Details Declared type ((payload: PointerEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onBeforetoggle	((payload: ToggleEvent) => void) | undefined	—	Handles an impending open or close on a root supporting toggle events, such as a native popover or dialog.
Details Declared type ((payload: ToggleEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onToggle	((payload: ToggleEvent) => void) | undefined	—	Handles a completed open or close on a supporting root, such as details, a popover, or a native dialog.
Details Declared type ((payload: ToggleEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onWheel	((payload: WheelEvent) => void) | undefined	—	Handles wheel-device scrolling or zooming input; it does not necessarily mean the scroll position changed.
Details Declared type ((payload: WheelEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAnimationcancel	((payload: AnimationEvent) => void) | undefined	—	Handles a CSS animation being cancelled before normal completion.
Details Declared type ((payload: AnimationEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAnimationstart	((payload: AnimationEvent) => void) | undefined	—	Handles a CSS animation starting after its delay.
Details Declared type ((payload: AnimationEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAnimationend	((payload: AnimationEvent) => void) | undefined	—	Handles a CSS animation completing normally.
Details Declared type ((payload: AnimationEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onAnimationiteration	((payload: AnimationEvent) => void) | undefined	—	Handles a CSS animation finishing an iteration and beginning another.
Details Declared type ((payload: AnimationEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onSecuritypolicyviolation	((payload: SecurityPolicyViolationEvent) => void) | undefined	—	Handles content-security-policy violation events reaching the root; browsers normally dispatch these on document, so a button listener does not receive every document-level violation.
Details Declared type ((payload: SecurityPolicyViolationEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTransitioncancel	((payload: TransitionEvent) => void) | undefined	—	Handles a CSS transition being cancelled before completion.
Details Declared type ((payload: TransitionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTransitionend	((payload: TransitionEvent) => void) | undefined	—	Handles a CSS transition completing normally.
Details Declared type ((payload: TransitionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTransitionrun	((payload: TransitionEvent) => void) | undefined	—	Handles a CSS transition being created, before any transition delay.
Details Declared type ((payload: TransitionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
onTransitionstart	((payload: TransitionEvent) => void) | undefined	—	Handles a CSS transition starting after its delay.
Details Declared type ((payload: TransitionEvent) => void) | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
autofocus	Booleanish | undefined	—	Requests browser autofocus. Reka still performs its focus management when the dialog opens.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
formaction	string | undefined	—	The destination URL used when this button submits its form, overriding the form action.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
formenctype	string | undefined	—	The data encoding used when this button submits its form, overriding the form enctype.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
formmethod	string | undefined	—	The submission method used by this button, overriding the form method.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
formnovalidate	Booleanish | undefined	—	Skips browser constraint validation when this button submits its form.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
formtarget	string | undefined	—	Selects the browsing context that displays this button’s form response, overriding the form target.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
name	string | undefined	—	The field name included in form data with value when this button is the submitter.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
innerHTML	string | undefined	—	Writes an HTML string into the root element, replacing the children rendered by its default slot.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
accesskey	string | undefined	—	Provides an access-key hint for the root element; the browser and operating system determine the key combination.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
contenteditable	Booleanish | "inherit" | "plaintext-only" | undefined	—	Controls whether root content is editable; plaintext-only allows plain-text editing, while inherit inherits the editing state.
Details Declared type Booleanish | "inherit" | "plaintext-only" | undefined Literal values "false" "inherit" "plaintext-only" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
contextmenu	string | undefined	—	A legacy HTML context-menu association containing a menu element ID; it does not create or open a BrutxUI menu.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
draggable	Booleanish | undefined	—	Controls whether the root element can be a source for native browser drag and drop.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
enterkeyhint	"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined	—	Suggests the virtual keyboard’s Enter-key label or icon for an editable root element.
Details Declared type "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined Literal values "done" "enter" "go" "next" "previous" "search" "send" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
enterKeyHint	"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined	—	Vue’s deprecated camel-case alias for the virtual keyboard Enter-key hint; use enterkeyhint.
Details Declared type "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined Literal values "done" "enter" "go" "next" "previous" "search" "send" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
hidden	"" | "hidden" | Booleanish | "until-found" | undefined	—	Controls the root element’s HTML hidden state; until-found allows supporting browsers to reveal it through features such as find-in-page.
Details Declared type "" | "hidden" | Booleanish | "until-found" | undefined Literal values "" "false" "hidden" "true" "until-found" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
inert	Booleanish | undefined	—	Makes the root and its flat-tree descendants inert, preventing focus and normal user interaction.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
lang	string | undefined	—	Identifies the language of the root content for screen-reader pronunciation and browser text processing.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
placeholder	string | undefined	—	Passes an input placeholder to a supporting input root; a regular button does not display placeholder text.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
spellcheck	Booleanish | undefined	—	Controls the browser’s spell-checking hint for editable content.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
tabindex	Numberish | undefined	—	Sets root focus order: 0 uses document order, while -1 allows programmatic focus outside sequential keyboard navigation.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
title	string | undefined	—	Provides supplementary text through the browser’s native title behavior.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
translate	"yes" | "no" | undefined	—	Indicates whether translation tools should translate the root element’s translatable text and attributes.
Details Declared type "yes" | "no" | undefined Literal values "no" "yes" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
radiogroup	string | undefined	—	The group name for legacy HTML radio commands; it does not give the action button radio-group behavior.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
role	string | undefined	—	Sets the root’s role for assistive technology; it must match the rendered element and its interaction behavior.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
about	string | undefined	—	Identifies the subject resource described by RDFa metadata.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
datatype	string | undefined	—	Specifies the datatype of an RDFa literal value.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
inlist	any	—	Adds the RDFa relationship object to its predicate’s list; presence matters and the attribute value is ignored.
Details Declared type any Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
prefix	string | undefined	—	Declares RDFa prefix-to-IRI mappings for abbreviated metadata identifiers.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
property	string | undefined	—	Declares RDFa properties relating a subject to a resource or literal.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
resource	string | undefined	—	Supplies a resource identifier used in an RDFa relationship.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
typeof	string | undefined	—	Declares the types of the resource described by RDFa.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
vocab	string | undefined	—	Sets the default vocabulary IRI used for RDFa terms.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
autocapitalize	string | undefined	—	Suggests automatic capitalization for editable content, such as sentences, words, or all characters.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
autocorrect	string | undefined	—	Provides an autocorrection hint for an editable root that supports it.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
autosave	string | undefined	—	A Safari search-input extension naming stored search history; a regular button does not save searches.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
color	string | undefined	—	Passes the legacy HTML color presentation attribute; the action button’s colors are controlled by variant and CSS classes.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
itemprop	string | undefined	—	Names the properties supplied by the root element in HTML microdata.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
itemscope	Booleanish | undefined	—	Creates an HTML microdata item scope on the root element.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
itemtype	string | undefined	—	Specifies vocabulary type URLs for the microdata item created by itemscope.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
itemid	string | undefined	—	Provides a global identifier for a microdata item, together with itemscope and itemtype.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
itemref	string | undefined	—	Lists space-separated IDs of elements outside the scope that contribute microdata properties.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
results	Numberish | undefined	—	A Safari search-input extension limiting search-history menu entries; a regular button has no such menu.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
security	string | undefined	—	A legacy Internet Explorer iframe security-zone attribute; the action button does not use it to implement a security policy.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
unselectable	"on" | "off" | undefined	—	A legacy selection attribute: on prevents starting text selection on the element, while off allows it.
Details Declared type "on" | "off" | undefined Literal values "off" "on" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
inputmode	"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined	—	Suggests a virtual keyboard layout for an editable root, such as numeric or email; it does not validate input.
Details Declared type "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined Literal values "decimal" "email" "none" "numeric" "search" "tel" "text" "url" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
is	string | undefined	—	Names a registered customized built-in element for the HTML root; support depends on the browser and rendering path.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
exportparts	string | undefined	—	Maps and exposes names of internal shadow parts to outer ::part selectors.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
part	string | undefined	—	Names the root element’s shadow parts for external styling through ::part.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-activedescendant	string | undefined	—	References the active item in a composite widget while DOM focus stays on the widget root.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-atomic	Booleanish | undefined	—	Indicates whether a live-region change is announced as the whole region or only its changed parts.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-autocomplete	"none" | "both" | "inline" | "list" | undefined	—	Describes text-input completion as inline, list-based, both, or absent.
Details Declared type "none" | "both" | "inline" | "list" | undefined Literal values "both" "inline" "list" "none" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-busy	Booleanish | undefined	—	Marks a region as updating so assistive technology can defer presenting its changes.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-checked	Booleanish | "mixed" | undefined	—	Describes the checked state of checkable controls; mixed represents partial selection for roles that support it.
Details Declared type Booleanish | "mixed" | undefined Literal values "false" "mixed" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-colcount	Numberish | undefined	—	Provides the total column count of a table, grid, or treegrid, including columns absent from the DOM.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-colindex	Numberish | undefined	—	Provides an element’s one-based column position in a table or grid.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-colspan	Numberish | undefined	—	Provides the number of columns spanned by a table or grid cell.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-controls	string | undefined	—	Lists space-separated IDs of elements whose content or presence this control manages.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-current	Booleanish | "page" | "step" | "location" | "date" | "time" | undefined	—	Identifies the current item in a related set, optionally as a page, step, location, date, or time.
Details Declared type Booleanish | "page" | "step" | "location" | "date" | "time" | undefined Literal values "date" "false" "location" "page" "step" "time" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-describedby	string | undefined	—	Lists space-separated IDs of elements that provide a supplementary description for the root.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-details	string | undefined	—	References an element containing structured details that users can explore further.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-disabled	Booleanish | undefined	—	Communicates that the control is unavailable; this attribute alone does not prevent clicks or dialog closure.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-dropeffect	"none" | "link" | "copy" | "execute" | "move" | "popup" | undefined	—	Deprecated drag-and-drop semantics describing operations available when an object is dropped on the target.
Details Declared type "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined Literal values "copy" "execute" "link" "move" "none" "popup" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-errormessage	string | undefined	—	References the current error-message element, together with aria-invalid to express an invalid state.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-expanded	Booleanish | undefined	—	Describes whether the control or its controlled content is expanded; application logic manages expansion.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-flowto	string | undefined	—	References subsequent elements in an alternative reading order that assistive technology can offer to users.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-grabbed	Booleanish | undefined	—	A deprecated drag-and-drop state indicating whether the element is grabbed for dragging.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-haspopup	Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined	—	Declares the kind of interactive popup the control can open, such as menu or dialog; it does not create a popup.
Details Declared type Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined Literal values "dialog" "false" "grid" "listbox" "menu" "tree" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-hidden	Booleanish | undefined	—	Controls whether the element and descendants are hidden from the accessibility tree, without changing visual display or keyboard focus.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-invalid	Booleanish | "grammar" | "spelling" | undefined	—	Describes invalid input, including grammar or spelling errors.
Details Declared type Booleanish | "grammar" | "spelling" | undefined Literal values "false" "grammar" "spelling" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-keyshortcuts	string | undefined	—	Advertises keyboard shortcuts already implemented by the application; it does not register key handlers.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-label	string | undefined	—	Provides the root’s accessible name directly, such as the action name of an icon-only confirmation button.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-labelledby	string | undefined	—	Lists space-separated IDs of elements that supply the root’s accessible name.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-level	Numberish | undefined	—	Provides the one-based level of a hierarchical item, such as a heading or tree item.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-live	"off" | "assertive" | "polite" | undefined	—	Sets live-region announcement priority: off, polite, or assertive.
Details Declared type "off" | "assertive" | "polite" | undefined Literal values "assertive" "off" "polite" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-modal	Booleanish | undefined	—	Declares a supported dialog role as modal; dialog primitives implement the actual focus containment.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-multiline	Booleanish | undefined	—	Describes whether a textbox accepts multiple lines of input.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-multiselectable	Booleanish | undefined	—	Describes whether a selectable collection allows multiple selected items.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-orientation	"vertical" | "horizontal" | undefined	—	Describes whether a widget uses horizontal or vertical orientation.
Details Declared type "vertical" | "horizontal" | undefined Literal values "horizontal" "vertical" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-owns	string | undefined	—	Uses element IDs to establish accessibility ownership not expressed by the DOM hierarchy.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-placeholder	string | undefined	—	Provides an expected-value or format hint for an empty input control; it does not replace the control’s name.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-posinset	Numberish | undefined	—	Describes a list or tree item’s one-based position in its set.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-pressed	Booleanish | "mixed" | undefined	—	Describes a toggle button’s pressed state; mixed indicates a mixed state, and application logic manages changes.
Details Declared type Booleanish | "mixed" | undefined Literal values "false" "mixed" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-readonly	Booleanish | undefined	—	Declares that a supporting widget remains operable while its value cannot be edited.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-relevant	"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined	—	Selects which live-region changes warrant announcements, including additions, removals, and text changes.
Details Declared type "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined Literal values "additions removals" "additions text" "additions" "all" "removals additions" "removals text" "removals" "text additions" "text removals" "text" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-required	Booleanish | undefined	—	Declares that an input control requires a value; native constraints or application logic perform validation.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-roledescription	string | undefined	—	Provides a localized, user-facing description of the element’s existing role.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-rowcount	Numberish | undefined	—	Provides the total row count of a table, grid, or treegrid, including rows absent from the DOM.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-rowindex	Numberish | undefined	—	Provides an element’s one-based row position in a table or grid.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-rowspan	Numberish | undefined	—	Provides the number of rows spanned by a table or grid cell.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-selected	Booleanish | undefined	—	Describes selection for supporting roles such as options, tabs, and grid rows.
Details Declared type Booleanish | undefined Literal values "false" "true" false true Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-setsize	Numberish | undefined	—	Provides the total item count in the set containing a list or tree item.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-sort	"none" | "ascending" | "descending" | "other" | undefined	—	Describes the sort direction of data associated with a table or grid header.
Details Declared type "none" | "ascending" | "descending" | "other" | undefined Literal values "ascending" "descending" "none" "other" Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-valuemax	Numberish | undefined	—	Provides the maximum permitted value of a range widget.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-valuemin	Numberish | undefined	—	Provides the minimum permitted value of a range widget.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-valuenow	Numberish | undefined	—	Provides the current numeric value of a range widget.
Details Declared type Numberish | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue
aria-valuetext	string | undefined	—	Expresses a range widget’s current value as meaningful text, such as a named level.
Details Declared type string | undefined Default value details Not declared — Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue

AlertDialogAction — Slots

Name	Signature or type	Description
#default	{}	The action button’s text or icon; with asChild, provide a single child that receives the props and interaction behavior.
Details Declared type {} Source AlertDialogAction.vue packages/ui/src/components/alert-dialog/AlertDialogAction.vue

AlertDialogCancel

AlertDialogCancel — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the cancel button root, which uses the outline variant.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogCancel.vue:9 packages/ui/src/components/alert-dialog/AlertDialogCancel.vue

AlertDialogCancel — Slots

Name	Signature or type	Description
#default	{}	The cancel button content; activation requests closure, and Reka attempts to focus this button when the dialog opens.
Details Declared type {} Source AlertDialogCancel.vue packages/ui/src/components/alert-dialog/AlertDialogCancel.vue

AlertDialogDescription

AlertDialogDescription — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the dialog description element.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogDescription.vue:9 packages/ui/src/components/alert-dialog/AlertDialogDescription.vue

AlertDialogDescription — Slots

Name	Signature or type	Description
#default	{}	Content explaining the operation and its consequences, associated by Reka with the dialog’s accessible description.
Details Declared type {} Source AlertDialogDescription.vue packages/ui/src/components/alert-dialog/AlertDialogDescription.vue

AlertDialogFooter

AlertDialogFooter — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the footer container for action buttons.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogFooter.vue:8 packages/ui/src/components/alert-dialog/AlertDialogFooter.vue

AlertDialogFooter — Slots

Name	Signature or type	Description
#default	{}	Footer actions, usually cancel and confirmation buttons; the footer container is omitted when this slot is not provided.
Details Declared type {} Source AlertDialogFooter.vue packages/ui/src/components/alert-dialog/AlertDialogFooter.vue

AlertDialogHeader

AlertDialogHeader — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the header container for the title and description.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogHeader.vue:8 packages/ui/src/components/alert-dialog/AlertDialogHeader.vue

AlertDialogHeader — Slots

Name	Signature or type	Description
#default	{}	Header content, usually combining AlertDialogTitle and AlertDialogDescription.
Details Declared type {} Source AlertDialogHeader.vue packages/ui/src/components/alert-dialog/AlertDialogHeader.vue

AlertDialogTitle

AlertDialogTitle — Props

Name	Type	Default	Description
class Nullable	ClassValue	—	Additional CSS classes merged into the dialog title element.
Details Declared type ClassValue Literal values false null true Default value details Not declared — Source AlertDialogTitle.vue:9 packages/ui/src/components/alert-dialog/AlertDialogTitle.vue

AlertDialogTitle — Slots

Name	Signature or type	Description
#default	{}	The dialog title, associated by Reka with its accessible name; supply a title describing the operation to confirm. Without renderable slot content, the fallback is the English text Alert; this fallback is not localized.
Details Declared type {} Source AlertDialogTitle.vue packages/ui/src/components/alert-dialog/AlertDialogTitle.vue

Reka UI Primitives

Import AlertDialogRoot (named AlertDialog in the example), AlertDialogTrigger, and AlertDialogPortal from reka-ui. The API list above covers the seven public BrutxUI sub-components. AlertDialogContent already composes a Portal and overlay internally, and forwards additional attributes and listeners to its content primitive, including aria-*, data-*, style, and @escape-key-down.

AlertDialogCancel uses the outline button variant. Provide the title through the default slot of AlertDialogTitle; without renderable content it displays the English fallback Alert, so applications should supply a meaningful localized title.

Native Attributes and Events

AlertDialogAction explicitly inherits Reka PrimitiveProps and Vue ButtonHTMLAttributes. The API list retains these inherited members, including HTML attributes, ARIA attributes, and on* event listeners. The root defaults to button, with a button type fallback of button. When using as or asChild, actual behavior depends on the rendered element: media events require a media root, form events occur on forms, and ARIA states must suit the element’s role.

Listeners such as onClick can be written as @click in templates. Activating AlertDialogAction requests dialog closure; an asynchronous handler does not delay that request. Use controlled open state on AlertDialogRoot when application logic must determine when to close.

See the HTML button attributes and RDFa attribute definitions for inherited attribute semantics. The Safari HTML attribute reference describes browser extensions such as autosave and results.

Accessibility

• Keyboard: Press Escape to close the dialog; AlertDialogCancel closes the dialog on click; AlertDialogAction confirms and closes the dialog
• ARIA Attributes: The dialog uses the semantic role="alertdialog" attribute
• Focus Management: When the dialog opens, focus is trapped inside