diff --git a/docs/_utilities/markdown.cjs b/docs/_utilities/markdown.cjs
index 4a73e8f39..d87a645f8 100644
--- a/docs/_utilities/markdown.cjs
+++ b/docs/_utilities/markdown.cjs
@@ -23,12 +23,20 @@ markdown.use(markdownItReplaceIt);
 
 // Callouts
 ['tip', 'warning', 'danger'].forEach(type => {
+  const variant = type === 'tip' ? 'brand' : type;
+  let icon = 'info-circle';
+  if (type === 'warning') icon = 'exclamation-circle';
+  if (type === 'danger') icon = 'exclamation-triangle';
+
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {
       if (tokens[idx].nesting === 1) {
-        return `<div role="alert" class="callout callout--${type}">`;
+        return `
+          <sl-alert class="callout" variant="${variant}" open>
+            <sl-icon slot="icon" name="${icon}"></sl-icon>
+        `;
       }
-      return '</div>\n';
+      return '</sl-alert>\n';
     }
   });
 });
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index e75fb3ed5..543f155d7 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -512,12 +512,6 @@ pre:hover .copy-code-button,
 
 /* Callouts */
 .callout {
-  position: relative;
-  background-color: var(--wa-color-neutral-container-fill-muted);
-  border-left: solid 4px var(--wa-color-neutral-container-outline-muted);
-  border-radius: var(--wa-corners-1x);
-  color: var(--wa-color-neutral-text-on-muted);
-  padding: var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-2xl);
   margin-bottom: var(--docs-content-vertical-spacing);
 }
 
@@ -529,66 +523,14 @@ pre:hover .copy-code-button,
   margin-bottom: 0;
 }
 
-.callout--tip {
-  background-color: var(--wa-color-brand-container-fill-muted);
-  border-left-color: var(--wa-color-brand-element-outline-muted);
-  color: var(--wa-color-brand-text-on-muted);
-}
-
-.callout::before {
-  content: '';
-  position: absolute;
-  top: calc(50% - 0.8rem);
-  left: calc(-0.8rem - 2px);
-  width: 1.6rem;
-  height: 1.6rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--wa-font-family-longform);
-  font-weight: var(--wa-font-weight-heavy);
-  clip-path: circle(50% at 50% 50%);
-}
-
-.callout--tip::before {
-  content: 'i';
-  font-style: italic;
-  background-color: var(--wa-color-brand-element-outline-muted);
-  color: var(--wa-color-brand-text-on-muted);
-}
-
-.callout--warning {
-  background-color: var(--wa-color-warning-container-fill-muted);
-  border-left-color: var(--wa-color-warning-element-outline-muted);
-  color: var(--wa-color-warning-text-on-muted);
-}
-
-.callout--warning::before {
-  content: '!';
-  background-color: var(--wa-color-warning-element-outline-muted);
-  color: var(--wa-color-warning-text-on-muted);
-}
-
-.callout--danger {
-  background-color: var(--wa-color-danger-container-fill-muted);
-  border-left-color: var(--wa-color-danger-element-outline-muted);
-  color: var(--wa-color-danger-text-on-muted);
-}
-
-.callout--danger::before {
-  content: '‼';
-  background-color: var(--wa-color-danger-element-outline-muted);
-  color: var(--wa-color-danger-text-on-muted);
-}
-
-.callout + .callout {
-  margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));
-}
-
 .callout a {
   color: inherit;
 }
 
+.callout p {
+  margin-top: 0;
+}
+
 /* Aside */
 .content aside {
   float: right;
@@ -995,8 +937,7 @@ html.sidebar-open #menu-toggle {
   }
 
   details,
-  pre,
-  .callout {
+  pre {
     border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
   }
 
@@ -1013,10 +954,6 @@ html.sidebar-open #menu-toggle {
     display: none;
   }
 
-  .callout::before {
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
-  }
-
   .component-page__navigation,
   .copy-code-button,
   .code-preview__buttons,
diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md
index 5c1ad11d2..63a25ae5e 100644
--- a/docs/pages/components/alert.md
+++ b/docs/pages/components/alert.md
@@ -24,7 +24,7 @@ const App = () => (
 );
 ```
 
-:::tip
+:::warning
 Alerts will not be visible if the `open` attribute is not present.
 :::
 
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 7ec43931c..158090c9b 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -15,15 +15,11 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-top-width: calc(var(--sl-panel-border-width) * 3);
-    border-radius: var(--sl-border-radius-medium);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    line-height: 1.6;
-    color: var(--sl-color-neutral-700);
+    border-radius: var(--wa-corners-1x);
+    font-family: var(--wa-font-family-body);
+    font-size: var(--wa-font-size-m);
+    font-weight: var(--wa-font-size-normal);
+    line-height: var(--wa-font-line-height-regular);
     margin: inherit;
   }
 
@@ -36,54 +32,44 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--sl-font-size-large);
-    padding-inline-start: var(--sl-spacing-large);
+    font-size: var(--wa-font-size-l);
+    padding-inline-start: var(--wa-space-l);
   }
 
   .alert--brand {
-    border-top-color: var(--sl-color-primary-600);
-  }
-
-  .alert--brand .alert__icon {
-    color: var(--sl-color-primary-600);
+    background-color: var(--wa-color-brand-container-fill-muted);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
+    color: var(--wa-color-brand-text-on-muted);
   }
 
   .alert--success {
-    border-top-color: var(--sl-color-success-600);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--sl-color-success-600);
+    background-color: var(--wa-color-success-container-fill-muted);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-container-outline-muted);
+    color: var(--wa-color-success-text-on-muted);
   }
 
   .alert--neutral {
-    border-top-color: var(--sl-color-neutral-600);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--sl-color-neutral-600);
+    background-color: var(--wa-color-neutral-container-fill-muted);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-container-outline-muted);
+    color: var(--wa-color-neutral-text-on-muted);
   }
 
   .alert--warning {
-    border-top-color: var(--sl-color-warning-600);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--sl-color-warning-600);
+    background-color: var(--wa-color-warning-container-fill-muted);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-container-outline-muted);
+    color: var(--wa-color-warning-text-on-muted);
   }
 
   .alert--danger {
-    border-top-color: var(--sl-color-danger-600);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--sl-color-danger-600);
+    background-color: var(--wa-color-danger-container-fill-muted);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-container-outline-muted);
+    color: var(--wa-color-danger-text-on-muted);
   }
 
   .alert__message {
     flex: 1 1 auto;
     display: block;
-    padding: var(--sl-spacing-large);
+    padding: var(--wa-space-m);
     overflow: hidden;
   }
 
@@ -91,7 +77,12 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--sl-font-size-medium);
-    padding-inline-end: var(--sl-spacing-medium);
+    color: currentColor;
+    font-size: var(--wa-font-size-m);
+    padding-inline-end: var(--wa-space-m);
+  }
+
+  .alert__close-button:active {
+    color: color-mix(in oklch, currentColor, black 6%);
   }
 `;
diff --git a/src/themes/_utility.css b/src/themes/_utility.css
index 1d43f5a4d..639210e6a 100644
--- a/src/themes/_utility.css
+++ b/src/themes/_utility.css
@@ -13,7 +13,7 @@
   position: fixed;
   top: 0;
   inset-inline-end: 0;
-  z-index: var(--sl-z-index-toast);
+  z-index: var(--wa-z-index-toast);
   width: 28rem;
   max-width: 100%;
   max-height: 100%;
@@ -21,9 +21,9 @@
 }
 
 .sl-toast-stack sl-alert {
-  margin: var(--sl-spacing-medium);
+  margin: var(--wa-space-m);
 }
 
 .sl-toast-stack sl-alert::part(base) {
-  box-shadow: var(--sl-shadow-large);
+  box-shadow: var(--wa-shadow-level-3);
 }