{"name":"alert-dialog","title":"Alert Dialog","description":"A modal dialog that interrupts the user with important content and expects a response.","installCommand":"bunx marko-ui add alert-dialog -y","usageTags":"<AlertDialog>","importSnippet":"import AlertDialog from \"@/components/ui/alert-dialog/alert-dialog.marko\";","usageSnippet":"<AlertDialog>\n  <@trigger|props|>\n    <Button ...props variant=\"outline\">Show Dialog</Button>\n  </@trigger>\n  <@title>Are you absolutely sure?</@title>\n  <@description>\n    This action cannot be undone.\n  </@description>\n</AlertDialog>","tags":["AlertDialog"],"parts":[{"name":"description"},{"name":"media"},{"name":"title"},{"name":"trigger","param":"Record<string, unknown>"}],"props":[{"name":"action","type":"() => void","required":false},{"name":"actionText","type":"string","required":false},{"name":"actionVariant","type":"'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | null | undefined","required":false},{"name":"aria-label","type":"string | undefined","required":false,"description":"Human readable label for the dialog, in event the dialog title is not rendered"},{"name":"cancelText","type":"string","required":false},{"name":"cancelVariant","type":"'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | null | undefined","required":false},{"name":"closeOnEscape","type":"boolean | undefined","required":false,"fixed":"false","description":"Whether to close the dialog when the escape key is pressed"},{"name":"closeOnInteractOutside","type":"boolean | undefined","required":false,"fixed":"false","description":"Whether to close the dialog when the outside is clicked"},{"name":"defaultOpen","type":"boolean | undefined","required":false,"default":"false","description":"The initial open state of the dialog when rendered.\nUse when you don't need to control the open state of the dialog."},{"name":"defaultTriggerValue","type":"string | null | undefined","required":false,"description":"The initial active trigger value when rendered.\nUse when you don't need to control the active trigger value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"finalFocusEl","type":"(() => MaybeElement) | undefined","required":false,"description":"Element to receive focus when the dialog is closed"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the dialog. Useful for composition."},{"name":"initialFocusEl","type":"(() => MaybeElement) | undefined","required":false,"description":"Element to receive focus when the dialog is opened"},{"name":"modal","type":"boolean | undefined","required":false,"default":"true","description":"Whether to prevent pointer interaction outside the element and hide all content below it"},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the dialog"},{"name":"persistentElements","type":"(() => Element | null)[] | undefined","required":false,"description":"Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event"},{"name":"preventScroll","type":"boolean | undefined","required":false,"default":"true","description":"Whether to prevent scrolling behind the dialog when it's opened"},{"name":"restoreFocus","type":"boolean | undefined","required":false,"description":"Whether to restore focus to the element that had focus before the dialog was opened"},{"name":"role","type":"'dialog' | 'alertdialog' | undefined","required":false,"fixed":"alertdialog","description":"The dialog's role"},{"name":"size","type":"'default' | 'sm'","required":false,"description":"`\"default\" | \"sm\"` — mirrors upstream's `AlertDialogContent` size prop."},{"name":"trapFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to trap focus inside the dialog when it's opened"},{"name":"triggerValue","type":"string | null | undefined","required":false,"description":"The controlled active trigger value"}],"events":[{"name":"onEscapeKeyDown","arg":"KeyboardEvent","description":"Function called when the escape key is pressed"},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function to call when the dialog's open state changes"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onRequestDismiss","arg":"LayerDismissEvent","description":"Function called when this layer is closed due to a parent layer being closed"},{"name":"onTriggerValueChange","arg":"TriggerValueChangeDetails","description":"Function to call when the active trigger changes"},{"name":"openChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":["Rendered with `role=\"alertdialog\"` (not `\"dialog\"`) so assistive technology announces it as requiring an explicit response, per the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).","Focus moves into the dialog on open and is trapped there until it closes; it's restored to the trigger element on close.","Unlike a plain dialog, closing via the Escape key and clicking outside the content are both disabled by default (`closeOnEscape={false}`, `closeOnInteractOutside={false}`) — the user must choose Cancel or Continue.","The title and description are linked to the content via `aria-labelledby`/`aria-describedby`, generated automatically from `@title`/`@description`."],"examples":[{"id":"alert-dialog-basic","title":"Basic","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<AlertDialog>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Show Dialog</Button>\n  </@trigger>\n  <@title>Are you absolutely sure?</@title>\n  <@description>\n    This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n  </@description>\n</AlertDialog>","description":"A basic alert dialog with a title, description, and cancel and continue buttons."},{"id":"alert-dialog-small","title":"Small","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<AlertDialog size=\"sm\" cancelText=\"Don't allow\" actionText=\"Allow\">\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Show Dialog</Button>\n  </@trigger>\n  <@title>Allow accessory to connect?</@title>\n  <@description>\n    Do you want to allow the USB accessory to connect to this device?\n  </@description>\n</AlertDialog>","description":"Use the `size=\"sm\"` prop to make the alert dialog smaller."},{"id":"alert-dialog-media","title":"Media","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<AlertDialog cancelText=\"Cancel\" actionText=\"Share\">\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Share Project</Button>\n  </@trigger>\n  <@media>\n    <Icon name=\"CirclePlusIcon\"/>\n  </@media>\n  <@title>Share this project?</@title>\n  <@description>\n    Anyone with the link will be able to view and edit this project.\n  </@description>\n</AlertDialog>","description":"Use the `@media` slot to add a media element such as an icon or image to the alert dialog."},{"id":"alert-dialog-small-media","title":"Small with Media","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<AlertDialog size=\"sm\" cancelText=\"Don't allow\" actionText=\"Allow\">\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Show Dialog</Button>\n  </@trigger>\n  <@media>\n    <Icon name=\"BluetoothIcon\"/>\n  </@media>\n  <@title>Allow accessory to connect?</@title>\n  <@description>\n    Do you want to allow the USB accessory to connect to this device?\n  </@description>\n</AlertDialog>","description":"Use the `size=\"sm\"` prop to make the alert dialog smaller and the `@media` slot to add a media element such as an icon or image to the alert dialog."},{"id":"alert-dialog-destructive","title":"Destructive","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<AlertDialog\n  cancelText=\"No, keep it\"\n  actionText=\"Yes, delete it\"\n  action=() => { console.log(\"deleted\"); }\n>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"destructive\">Delete account</Button>\n  </@trigger>\n  <@title>Delete account</@title>\n  <@description>\n    This will permanently delete your account. This action is irreversible.\n  </@description>\n</AlertDialog>","description":"Override `cancelText` and `actionText`, and run side effects on confirm with the `action` callback."},{"id":"alert-dialog-demo","title":"Demo","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<AlertDialog>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Show Dialog</Button>\n  </@trigger>\n  <@title>Are you absolutely sure?</@title>\n  <@description>\n    This action cannot be undone. This will permanently delete your account from our servers.\n  </@description>\n</AlertDialog>","description":"The hero preview shown at the top of this page — the same basic composition as above."},{"id":"alert-dialog-rtl","title":"RTL","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex gap-4\" dir=\"rtl\">\n  <AlertDialog dir=\"rtl\" cancelText=\"إلغاء\" actionText=\"متابعة\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">إظهار الحوار</Button>\n    </@trigger>\n    <@title>هل أنت متأكد تمامًا؟</@title>\n    <@description>\n      لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.\n    </@description>\n  </AlertDialog>\n  <AlertDialog dir=\"rtl\" size=\"sm\" cancelText=\"عدم السماح\" actionText=\"السماح\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">إظهار الحوار (صغير)</Button>\n    </@trigger>\n    <@media>\n      <Icon name=\"BluetoothIcon\"/>\n    </@media>\n    <@title>السماح للملحق بالاتصال؟</@title>\n    <@description>\n      هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟\n    </@description>\n  </AlertDialog>\n</div>","description":"The `dir` prop is a native attribute pass-through — set it on `<AlertDialog>` to flip logical-property layout and typography for right-to-left languages. Every RTL example on this site does it the same way: a `dir=\"rtl\"` wrapper plus Arabic labels."},{"id":"alert-dialog-controlled","title":"Controlled","source":"import AlertDialog from \"@marko-ui/shadcn/ui/alert-dialog/alert-dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<let/open=false/>\n\n<div class=\"flex items-center gap-4\">\n  <AlertDialog open=open openChange=(o) => { open = o; }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">${open ? \"Close\" : \"Open\"}</Button>\n    </@trigger>\n    <@title>Controlled alert dialog</@title>\n    <@description>The open state is controlled by the parent component.</@description>\n  </AlertDialog>\n  <span class=\"text-sm text-muted-foreground\">open: ${String(open)}</span>\n</div>","description":"Zag machines are controlled: an `open` prop without a change handler never moves. Pair it with `openChange`, or use Marko's bind shorthand `open:=state`.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["button"],"nativeAttributes":"div","composition":"`<AlertDialog>` is one file exposing upstream's tree as slots: `@trigger` (render-prop, receives the trigger props to spread onto your own element — never nest a `<button>` inside it), `@media` (optional icon/image above the title), `@title`, and `@description`. The footer's Cancel/Continue buttons are generated from props (`cancelText`/`actionText`, `cancelVariant`/`actionVariant`, `action`) rather than composed as separate slots."}