Alert Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. 

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>

Installation

uvx --from basic-components components add alert_dialog
pipx run --spec basic-components components add alert_dialog
pip install basic-components && components add alert_dialog
  • Copy Alert Dialog components below to your local environment
  • Place them in the components/ui/alert_dialog directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>

Code

{#def
    className: str = ""
#}
<div
  x-data="{
        open: false,
        close() {
            this.open = false;
            document.body.classList.remove('overflow-hidden');
        },
        init() {
            this.$watch('open', value => {
                if (value) {
                    document.body.classList.add('overflow-hidden');
                } else {
                    document.body.classList.remove('overflow-hidden');
                }
            });
        },
        focusables() { return [...document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\'-1\'])')] },
        handleEscape(e) {
            if (e.key === 'Escape') this.close()
        },
        focusTrap(e) {
            if (!this.open) return
            let elements = this.focusables()
            let first = elements[0]
            let last = elements[elements.length - 1]

            if (e.shiftKey && e.key === 'Tab' && document.activeElement === first) {
                e.preventDefault()
                last.focus()
            } else if (!e.shiftKey && e.key === 'Tab' && document.activeElement === last) {
                e.preventDefault()
                first.focus()
            }
        }
    }"
  x-on:keydown.escape.window="handleEscape"
  x-on:keydown.tab.prevent="focusTrap"
  class="{{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<button
  x-on:click="close"
  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</button>
{#def
    className: str = ""
#}
<button
  x-on:click="close"
  class="mt-2 sm:mt-0 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</button>
{#def
    className: str = ""
#}
<div
  class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg {{ className }}"
  x-on:click.stop
  role="alertdialog"
  aria-modal="true"
  x-show="open"
  x-transition:enter="transition ease-out duration-300"
  x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
  x-transition:leave="transition ease-in duration-200"
  x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
  x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div
  class="text-sm text-muted-foreground {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div
  class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div
  class="flex flex-col space-y-2 text-center sm:text-left {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div
  class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 {{ className }}"
  x-show="open"
  x-transition:enter="transition ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
  x-transition:leave="transition ease-in duration-200"
  x-transition:leave-start="opacity-100"
  x-transition:leave-end="opacity-0"
  {{ attrs.render() }}
></div>
{#def
    className: str = ""
#}
<template x-teleport="body">
  <div x-show="open" x-cloak {{ attrs.render() }}>
    {{ content }}
  </div>
</template>
{#def
    className: str = ""
#}
<div
  x-on:click="open = true"
  :className="{{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<h2
  class="text-lg font-semibold {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</h2>