diff --git a/docs/app/views/docs/alert_dialog.rb b/docs/app/views/docs/alert_dialog.rb
index 43f176549..162d6c073 100644
--- a/docs/app/views/docs/alert_dialog.rb
+++ b/docs/app/views/docs/alert_dialog.rb
@@ -11,7 +11,7 @@ def view_template
         <<~RUBY
           AlertDialog do
             AlertDialogTrigger do
-              Button { "Show dialog" }
+              Button(variant: :outline) { "Show dialog" }
             end
             AlertDialogContent do
               AlertDialogHeader do
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
index 75a34d2ef..17293ecd8 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
@@ -10,7 +10,10 @@ def view_template(&)
 
     def default_attrs
       {
-        variant: :primary
+        variant: :primary,
+        data: {
+          action: "click->ruby-ui--alert-dialog#dismiss"
+        }
       }
     end
   end
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
index 986dc8d8e..5af2d1aa8 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
@@ -11,6 +11,7 @@ def view_template(&)
     def default_attrs
       {
         variant: :outline,
+        autofocus: true,
         data: {
           action: "click->ruby-ui--alert-dialog#dismiss"
         },
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
index adc81fd4b..9da69fd25 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
@@ -2,42 +2,23 @@
 
 module RubyUI
   class AlertDialogContent < Base
-    def view_template(&block)
-      template(**attrs) do
-        div(data: {controller: "ruby-ui--alert-dialog"}) do
-          background
-          container(&block)
-        end
-      end
-    end
-
-    def background
-      div(
-        data_state: "open",
-        class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
-        style: "pointer-events:auto",
-        data_aria_hidden: "true",
-        aria_hidden: "true"
-      )
-    end
-
-    def container(&)
-      div(
-        role: "alertdialog",
-        data_state: "open",
-        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
-        style: "pointer-events:auto",
-        &
-      )
+    def view_template(&)
+      dialog(**attrs, &)
     end
 
     private
 
     def default_attrs
       {
+        role: "alertdialog",
         data: {
-          ruby_ui__alert_dialog_target: "content"
-        }
+          ruby_ui__alert_dialog_target: "dialog"
+        },
+        class: [
+          "fixed open:flex flex-col left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+          "duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards",
+          "backdrop:bg-background/80 backdrop:backdrop-blur-sm backdrop:duration-200 data-[state=open]:backdrop:animate-in data-[state=open]:backdrop:fade-in-0 data-[state=closed]:backdrop:animate-out data-[state=closed]:backdrop:fade-out-0 data-[state=closed]:backdrop:fill-mode-forwards"
+        ]
       }
     end
   end
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js b/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
index 98952e955..cca686625 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="ruby-ui--alert-dialog"
 export default class extends Controller {
-  static targets = ["content"];
+  static targets = ["dialog"];
   static values = {
     open: {
       type: Boolean,
@@ -11,21 +11,85 @@ export default class extends Controller {
   };
 
   connect() {
+    this.dialogTarget.addEventListener("cancel", this.handleCancel);
+    this.dialogTarget.addEventListener("close", this.handleClose);
     if (this.openValue) {
       this.open();
     }
   }
 
+  disconnect() {
+    // The <dialog> may already be gone; the scroll lock must be lifted either way.
+    if (this.hasDialogTarget) {
+      this.dialogTarget.removeEventListener("cancel", this.handleCancel);
+      this.dialogTarget.removeEventListener("close", this.handleClose);
+      // Nothing is left to wait for the exit animation, so apply the pending close now.
+      this.settleExit(this.dialogTarget);
+    }
+    document.body.classList.remove("overflow-hidden");
+  }
+
   open() {
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    // prevent scroll on body
+    this.dialogTarget.dataset.state = "open";
+    if (!this.dialogTarget.open) this.dialogTarget.showModal();
     document.body.classList.add("overflow-hidden");
   }
 
-  dismiss(e) {
-    // allow scroll on body
+  dismiss() {
+    if (this.dialogTarget.dataset.state === "closed") return;
+
+    this.dialogTarget.dataset.state = "closed";
+    this.hideAfterExitAnimation(this.dialogTarget);
+  }
+
+  afterExit() {
+    this.dialogTarget.close();
+  }
+
+  // Escape (and requestClose) must play the exit animation instead of closing at once.
+  handleCancel = (event) => {
+    // Already on its way out: let a second Escape close natively where the browser allows it.
+    if (this.dialogTarget.dataset.state === "closed") return;
+
+    event.preventDefault();
+    this.dismiss();
+  };
+
+  handleClose = () => {
     document.body.classList.remove("overflow-hidden");
-    // remove the element
-    this.element.remove();
+    // A close this controller did not start (a second Escape mid-exit) must not leave a pending exit behind.
+    this.settleExit(this.dialogTarget);
+  };
+
+  // Overlay exit — unlike the other overlays this waits on the Animation objects: the ::backdrop animates too,
+  // and its events land on the <dialog> under the same keyframe names as the panel's.
+  hideAfterExitAnimation(animated) {
+    const run = (this.exitRun = {});
+    // subtree: true is what lists the ::backdrop's animation; descendants are filtered back out.
+    const exitAnimations = animated
+      .getAnimations({ subtree: true })
+      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);
+
+    // No exit animation, or no box to run it in: nothing would ever finish.
+    if (exitAnimations.length === 0) {
+      this.settleExit(animated);
+      return;
+    }
+
+    // A cancelled exit (reopened mid-exit) counts as finished too.
+    Promise.allSettled(exitAnimations.map((animation) => animation.finished)).then(() => {
+      // A later dismiss or close owns the dialog now; this run is stale.
+      if (this.exitRun !== run) return;
+
+      this.settleExit(animated);
+    });
+  }
+
+  settleExit(animated) {
+    this.exitRun = null;
+    // Reopened mid-exit: it is on its way back in, leave it visible.
+    if (animated.dataset.state !== "closed") return;
+
+    this.afterExit(animated);
   }
 }
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
index 43f176549..162d6c073 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
@@ -11,7 +11,7 @@ def view_template
         <<~RUBY
           AlertDialog do
             AlertDialogTrigger do
-              Button { "Show dialog" }
+              Button(variant: :outline) { "Show dialog" }
             end
             AlertDialogContent do
               AlertDialogHeader do
diff --git a/gem/test/ruby_ui/alert_dialog_test.rb b/gem/test/ruby_ui/alert_dialog_test.rb
index 9c27fb710..ae36f240d 100644
--- a/gem/test/ruby_ui/alert_dialog_test.rb
+++ b/gem/test/ruby_ui/alert_dialog_test.rb
@@ -24,4 +24,125 @@ def test_render_with_all_items
 
     assert_match(/Show dialog/, output)
   end
+
+  # Regression test: content must be a native <dialog>, not a <template> cloned onto <body>
+  def test_content_renders_native_dialog_with_alertdialog_role
+    output = render_alert_dialog
+
+    assert_match(/<dialog[^>]*\srole="alertdialog"/, output, "AlertDialogContent must render a native <dialog role=\"alertdialog\">")
+    refute_match(/<template[\s>]/, output, "AlertDialogContent must not use a <template> element")
+  end
+
+  def test_content_does_not_nest_a_second_controller
+    output = render_alert_dialog
+
+    assert_equal 1, output.scan('data-controller="ruby-ui--alert-dialog"').size, "Only the wrapper carries the controller"
+    assert_match(/<div[^>]*data-controller="ruby-ui--alert-dialog"/, output, "AlertDialog wrapper must be a <div>")
+  end
+
+  def test_content_has_stimulus_target
+    assert_match(/<dialog[^>]*data-ruby-ui--alert-dialog-target="dialog"/, render_alert_dialog)
+  end
+
+  # Radix parity: Escape closes, clicking the backdrop does not
+  def test_content_has_no_backdrop_click_action
+    refute_match(/backdropClick/, render_alert_dialog)
+  end
+
+  # Regression test: a closed native <dialog> must stay hidden. Bare `flex`
+  # overrides the UA `dialog:not([open]) { display: none }`.
+  def test_content_does_not_force_display_when_closed
+    classes = dialog_classes(render_alert_dialog)
+
+    refute_includes classes, "flex", "Bare `flex` forces a closed <dialog> to display; use `open:flex`"
+    assert_includes classes, "open:flex", "AlertDialog must apply flex only when open (open:flex)"
+  end
+
+  # The controller owns data-state; the closed markup must not start in one
+  def test_content_renders_without_data_state
+    refute_match(/<dialog[^>]*\sdata-state=/, render_alert_dialog)
+  end
+
+  def test_content_has_enter_and_exit_animations
+    assert_dialog_classes(
+      "duration-200",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:fill-mode-forwards"
+    )
+  end
+
+  # The backdrop's animationend is dispatched on the <dialog> under the same keyframe name,
+  # so its exit must be as long as the panel's or the panel is cut short.
+  def test_content_animates_and_styles_backdrop
+    assert_dialog_classes(
+      "backdrop:bg-background/80",
+      "backdrop:backdrop-blur-sm",
+      "backdrop:duration-200",
+      "data-[state=open]:backdrop:animate-in",
+      "data-[state=open]:backdrop:fade-in-0",
+      "data-[state=closed]:backdrop:animate-out",
+      "data-[state=closed]:backdrop:fade-out-0",
+      "data-[state=closed]:backdrop:fill-mode-forwards"
+    )
+  end
+
+  def test_cancel_autofocuses_and_dismisses
+    output = phlex { RubyUI.AlertDialogCancel { "Cancel" } }
+
+    assert_match(/<button[^>]*\sautofocus[\s>]/, output, "Cancel must receive focus when the dialog opens")
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss"/, output)
+  end
+
+  def test_action_dismisses
+    output = phlex { RubyUI.AlertDialogAction { "Continue" } }
+
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss"/, output)
+  end
+
+  def test_action_keeps_user_supplied_actions
+    output = phlex { RubyUI.AlertDialogAction(data: {action: "click->account#destroy"}) { "Continue" } }
+
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss click->account#destroy"/, output)
+  end
+
+  def test_trigger_has_open_action
+    assert_match(/data-action="click->ruby-ui--alert-dialog#open"/, render_alert_dialog)
+  end
+
+  def test_open_value_is_set_on_wrapper
+    output = phlex do
+      RubyUI.AlertDialog(open: true) do
+        RubyUI.AlertDialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-ruby-ui--alert-dialog-open-value="true"/, output)
+  end
+
+  private
+
+  def render_alert_dialog
+    phlex do
+      RubyUI.AlertDialog do
+        RubyUI.AlertDialogTrigger do
+          RubyUI.Button { "Open" }
+        end
+        RubyUI.AlertDialogContent { "Content" }
+      end
+    end
+  end
+
+  def dialog_classes(output)
+    output[/<dialog\b.*?\sclass="([^"]*)"/m, 1].to_s.split
+  end
+
+  def assert_dialog_classes(*expected)
+    classes = dialog_classes(render_alert_dialog)
+    expected.each { |class_name| assert_includes classes, class_name }
+  end
 end
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index ed4cd153a..d5d106ac3 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -117,19 +117,19 @@
         },
         {
           "path": "alert_dialog_action.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogAction < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :primary\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogAction < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :primary,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        }\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_cancel.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogCancel < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :outline,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        },\n        class: \"mt-2 sm:mt-0\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogCancel < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :outline,\n        autofocus: true,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        },\n        class: \"mt-2 sm:mt-0\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogContent < Base\n    def view_template(&block)\n      template(**attrs) do\n        div(data: {controller: \"ruby-ui--alert-dialog\"}) do\n          background\n          container(&block)\n        end\n      end\n    end\n\n    def background\n      div(\n        data_state: \"open\",\n        class: \"fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in\",\n        style: \"pointer-events:auto\",\n        data_aria_hidden: \"true\",\n        aria_hidden: \"true\"\n      )\n    end\n\n    def container(&)\n      div(\n        role: \"alertdialog\",\n        data_state: \"open\",\n        class: \"flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full\",\n        style: \"pointer-events:auto\",\n        &\n      )\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__alert_dialog_target: \"content\"\n        }\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogContent < Base\n    def view_template(&)\n      dialog(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"alertdialog\",\n        data: {\n          ruby_ui__alert_dialog_target: \"dialog\"\n        },\n        class: [\n          \"fixed open:flex flex-col left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full\",\n          \"duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards\",\n          \"backdrop:bg-background/80 backdrop:backdrop-blur-sm backdrop:duration-200 data-[state=open]:backdrop:animate-in data-[state=open]:backdrop:fade-in-0 data-[state=closed]:backdrop:animate-out data-[state=closed]:backdrop:fade-out-0 data-[state=closed]:backdrop:fill-mode-forwards\"\n        ]\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--alert-dialog\"\nexport default class extends Controller {\n  static targets = [\"content\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  };\n\n  connect() {\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  open() {\n    document.body.insertAdjacentHTML(\"beforeend\", this.contentTarget.innerHTML);\n    // prevent scroll on body\n    document.body.classList.add(\"overflow-hidden\");\n  }\n\n  dismiss(e) {\n    // allow scroll on body\n    document.body.classList.remove(\"overflow-hidden\");\n    // remove the element\n    this.element.remove();\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--alert-dialog\"\nexport default class extends Controller {\n  static targets = [\"dialog\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  };\n\n  connect() {\n    this.dialogTarget.addEventListener(\"cancel\", this.handleCancel);\n    this.dialogTarget.addEventListener(\"close\", this.handleClose);\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  disconnect() {\n    // The <dialog> may already be gone; the scroll lock must be lifted either way.\n    if (this.hasDialogTarget) {\n      this.dialogTarget.removeEventListener(\"cancel\", this.handleCancel);\n      this.dialogTarget.removeEventListener(\"close\", this.handleClose);\n      // Nothing is left to wait for the exit animation, so apply the pending close now.\n      this.settleExit(this.dialogTarget);\n    }\n    document.body.classList.remove(\"overflow-hidden\");\n  }\n\n  open() {\n    this.dialogTarget.dataset.state = \"open\";\n    if (!this.dialogTarget.open) this.dialogTarget.showModal();\n    document.body.classList.add(\"overflow-hidden\");\n  }\n\n  dismiss() {\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    this.dialogTarget.dataset.state = \"closed\";\n    this.hideAfterExitAnimation(this.dialogTarget);\n  }\n\n  afterExit() {\n    this.dialogTarget.close();\n  }\n\n  // Escape (and requestClose) must play the exit animation instead of closing at once.\n  handleCancel = (event) => {\n    // Already on its way out: let a second Escape close natively where the browser allows it.\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    event.preventDefault();\n    this.dismiss();\n  };\n\n  handleClose = () => {\n    document.body.classList.remove(\"overflow-hidden\");\n    // A close this controller did not start (a second Escape mid-exit) must not leave a pending exit behind.\n    this.settleExit(this.dialogTarget);\n  };\n\n  // Overlay exit — unlike the other overlays this waits on the Animation objects: the ::backdrop animates too,\n  // and its events land on the <dialog> under the same keyframe names as the panel's.\n  hideAfterExitAnimation(animated) {\n    const run = (this.exitRun = {});\n    // subtree: true is what lists the ::backdrop's animation; descendants are filtered back out.\n    const exitAnimations = animated\n      .getAnimations({ subtree: true })\n      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);\n\n    // No exit animation, or no box to run it in: nothing would ever finish.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    // A cancelled exit (reopened mid-exit) counts as finished too.\n    Promise.allSettled(exitAnimations.map((animation) => animation.finished)).then(() => {\n      // A later dismiss or close owns the dialog now; this run is stale.\n      if (this.exitRun !== run) return;\n\n      this.settleExit(animated);\n    });\n  }\n\n  settleExit(animated) {\n    this.exitRun = null;\n    // Reopened mid-exit: it is on its way back in, leave it visible.\n    if (animated.dataset.state !== \"closed\") return;\n\n    this.afterExit(animated);\n  }\n}\n"
         },
         {
           "path": "alert_dialog_description.rb",
@@ -160,11 +160,11 @@
         "gems": []
       },
       "install_command": "rails g ruby_ui:component AlertDialog",
-      "docs_markdown": "# Alert Dialog\n\nA modal dialog that interrupts the user with important content and expects a response.\n\n## Usage\n\n### Example\n\n```ruby\nAlertDialog do\n  AlertDialogTrigger do\n    Button { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n```",
+      "docs_markdown": "# Alert Dialog\n\nA modal dialog that interrupts the user with important content and expects a response.\n\n## Usage\n\n### Example\n\n```ruby\nAlertDialog do\n  AlertDialogTrigger do\n    Button(variant: :outline) { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n```",
       "examples": [
         {
           "title": "Example",
-          "code": "AlertDialog do\n  AlertDialogTrigger do\n    Button { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n",
+          "code": "AlertDialog do\n  AlertDialogTrigger do\n    Button(variant: :outline) { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n",
           "language": "ruby"
         }
       ]