diff --git a/src/recipes/alert.ts b/src/recipes/alert.ts
index 36a3577..b79c23c 100644
--- a/src/recipes/alert.ts
+++ b/src/recipes/alert.ts
@@ -23,6 +23,12 @@ export interface AlertRecipeOptions {
   size?: AlertSize
   dismissed?: boolean
   fullWidth?: boolean
+  interactive?: boolean
+  hovered?: boolean
+  focused?: boolean
+  active?: boolean
+  disabled?: boolean
+  loading?: boolean
 }
 
 export function getAlertClasses(opts: AlertRecipeOptions = {}): string {
@@ -31,6 +37,12 @@ export function getAlertClasses(opts: AlertRecipeOptions = {}): string {
     size: sizeInput,
     dismissed = false,
     fullWidth = false,
+    interactive = false,
+    hovered = false,
+    focused = false,
+    active = false,
+    disabled = false,
+    loading = false,
   } = opts
 
   const variant = resolveOption({
@@ -52,6 +64,12 @@ export function getAlertClasses(opts: AlertRecipeOptions = {}): string {
     `sp-alert--${variant}`,
     `sp-alert--${size}`,
     dismissed && 'sp-alert--dismissed',
-    fullWidth && 'sp-alert--full'
+    fullWidth && 'sp-alert--full',
+    interactive && 'sp-alert--interactive',
+    hovered && 'sp-alert--hover is-hover',
+    focused && 'sp-alert--focus is-focus',
+    active && 'sp-alert--active is-active',
+    disabled && 'sp-alert--disabled',
+    loading && 'sp-alert--loading'
   )
 }
diff --git a/src/styles/components.css b/src/styles/components.css
index f74c3fc..bc96f06 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1497,6 +1497,12 @@
     font-family: var(--sp-font-family-sans);
     font-size: var(--sp-font-sm-size);
     line-height: var(--sp-font-sm-line-height);
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-alert--dismissed {
@@ -1555,6 +1561,43 @@
     border-color: var(--sp-component-alert-neutral-border);
   }
 
+  .sp-alert--interactive {
+    cursor: pointer;
+  }
+
+  .sp-alert--interactive:hover,
+  .sp-alert--hover,
+  .sp-alert.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-alert--interactive:active,
+  .sp-alert--active,
+  .sp-alert.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-alert--interactive:focus-visible,
+  .sp-alert--focus,
+  .sp-alert.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
+  .sp-alert:disabled,
+  .sp-alert[aria-disabled="true"],
+  .sp-alert--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .sp-alert--loading,
+  .sp-alert[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   /* AVATARS -------------------------------------------------------------- */
   .sp-avatar {
     display: inline-flex;