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..54fc486f0 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() {
+    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";
+    // The backdrop's animationend lands on this element under the same name, so both exits run for the same 200 ms.
+    this.hideAfterExitAnimation(this.dialogTarget);
+  }
+
+  afterExit() {
+    this.dialogTarget.close();
+  }
+
+  // Escape (and requestClose) must play the exit animation instead of closing at once.
+  handleCancel = (event) => {
+    event.preventDefault();
+    this.dismiss();
+  };
+
+  // A close this controller did not start must not leave the exit listeners behind.
+  handleClose = () => {
     document.body.classList.remove("overflow-hidden");
-    // remove the element
-    this.element.remove();
+    this.settleExit(this.dialogTarget);
+  };
+
+  // Overlay exit — the same block in every overlay controller, so keep them in sync.
+  exitAnimationNames = new WeakMap();
+
+  hideAfterExitAnimation(animated) {
+    const exitAnimations = animated
+      .getAnimations()
+      .filter((animation) => animation instanceof CSSAnimation);
+
+    // No exit animation, or no box to run it in: animationend would never fire.
+    if (exitAnimations.length === 0) {
+      this.settleExit(animated);
+      return;
+    }
+
+    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));
+    animated.addEventListener("animationend", this.handleExitAnimationEnd);
+    animated.addEventListener("animationcancel", this.handleExitAnimationEnd);
+  }
+
+  handleExitAnimationEnd = (event) => {
+    // animationend bubbles — an animated child must not hide its container.
+    if (event.target !== event.currentTarget) return;
+    // Closing mid-open cancels the enter animation; only the exit run settles this.
+    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;
+
+    this.settleExit(event.currentTarget);
+  };
+
+  settleExit(animated) {
+    animated.removeEventListener("animationend", this.handleExitAnimationEnd);
+    animated.removeEventListener("animationcancel", this.handleExitAnimationEnd);
+    // 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..9c7215e45 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    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    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    // The backdrop's animationend lands on this element under the same name, so both exits run for the same 200 ms.\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    event.preventDefault();\n    this.dismiss();\n  };\n\n  // A close this controller did not start must not leave the exit listeners behind.\n  handleClose = () => {\n    document.body.classList.remove(\"overflow-hidden\");\n    this.settleExit(this.dialogTarget);\n  };\n\n  // Overlay exit — the same block in every overlay controller, so keep them in sync.\n  exitAnimationNames = new WeakMap();\n\n  hideAfterExitAnimation(animated) {\n    const exitAnimations = animated\n      .getAnimations()\n      .filter((animation) => animation instanceof CSSAnimation);\n\n    // No exit animation, or no box to run it in: animationend would never fire.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));\n    animated.addEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.addEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n  }\n\n  handleExitAnimationEnd = (event) => {\n    // animationend bubbles — an animated child must not hide its container.\n    if (event.target !== event.currentTarget) return;\n    // Closing mid-open cancels the enter animation; only the exit run settles this.\n    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;\n\n    this.settleExit(event.currentTarget);\n  };\n\n  settleExit(animated) {\n    animated.removeEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.removeEventListener(\"animationcancel\", this.handleExitAnimationEnd);\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"
         }
       ]