From df927f67fcbd0aaa229b1a8e205ab3cb08f7a42d Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 23 Mar 2026 09:33:55 +1100
Subject: [PATCH] feat(skin): add error handling for audio players (#1048)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 cspell.json                                   |  1 +
 packages/core/src/dom/media/types.ts          |  1 +
 .../core/src/dom/store/features/presets.ts    |  1 +
 .../src/define/audio/minimal-skin.tailwind.ts | 10 +--
 .../html/src/define/audio/minimal-skin.ts     | 10 +--
 .../html/src/define/audio/skin.tailwind.ts    | 10 +--
 packages/html/src/define/audio/skin.ts        | 10 +--
 .../src/define/video/minimal-skin.tailwind.ts | 16 ++--
 .../html/src/define/video/minimal-skin.ts     | 16 ++--
 .../html/src/define/video/skin.tailwind.ts    | 16 ++--
 packages/html/src/define/video/skin.ts        | 16 ++--
 .../src/player/tests/create-player.test-d.ts  |  6 ++
 .../presets/audio/minimal-skin.tailwind.tsx   | 38 +++++-----
 .../react/src/presets/audio/minimal-skin.tsx  | 26 ++++++-
 .../react/src/presets/audio/skin.tailwind.tsx | 38 +++++-----
 packages/react/src/presets/audio/skin.tsx     | 22 +++++-
 .../src/presets/{video => }/error-dialog.tsx  | 22 +++---
 .../presets/video/minimal-skin.tailwind.tsx   | 53 ++++++-------
 .../react/src/presets/video/minimal-skin.tsx  | 27 ++++---
 .../react/src/presets/video/skin.tailwind.tsx | 54 ++++++-------
 packages/react/src/presets/video/skin.tsx     | 29 ++++---
 packages/sandbox/app/shell/navbar.tsx         |  2 +-
 packages/skins/src/default/css/audio.css      | 52 +++++++++++--
 .../src/default/css/components/buttons.css    | 38 ++++++----
 .../src/default/css/components/error.css      | 56 ++------------
 .../src/default/css/components/slider.css     | 16 ++++
 packages/skins/src/default/css/video.css      | 71 +++++++++++++++++-
 .../src/default/tailwind/audio.tailwind.ts    | 17 ++++-
 .../src/default/tailwind/components/button.ts | 20 ++---
 .../src/default/tailwind/components/error.ts  |  4 +-
 .../src/default/tailwind/components/seek.ts   |  2 +-
 .../src/default/tailwind/video.tailwind.ts    |  5 +-
 packages/skins/src/minimal/css/audio.css      | 55 ++++++++++++--
 .../src/minimal/css/components/buttons.css    | 54 ++++++++-----
 .../src/minimal/css/components/error.css      | 59 +--------------
 .../skins/src/minimal/css/components/root.css |  2 +
 packages/skins/src/minimal/css/video.css      | 75 ++++++++++++++++++-
 .../src/minimal/tailwind/audio.tailwind.ts    | 27 ++++++-
 .../src/minimal/tailwind/components/button.ts | 24 +++---
 .../src/minimal/tailwind/components/error.ts  |  4 +-
 .../src/minimal/tailwind/components/root.ts   |  1 +
 .../src/minimal/tailwind/components/seek.ts   |  2 +-
 .../src/minimal/tailwind/video.tailwind.ts    | 17 ++++-
 43 files changed, 648 insertions(+), 377 deletions(-)
 rename packages/react/src/presets/{video => }/error-dialog.tsx (52%)

diff --git a/cspell.json b/cspell.json
index bb4511bf..16b5b73f 100644
--- a/cspell.json
+++ b/cspell.json
@@ -15,6 +15,7 @@
     "rahim",
     "segoe",
     "shiki",
+    "squircle",
     "videojs",
     "vitesse",
     "wouter"
diff --git a/packages/core/src/dom/media/types.ts b/packages/core/src/dom/media/types.ts
index e3cbde0e..0946156d 100644
--- a/packages/core/src/dom/media/types.ts
+++ b/packages/core/src/dom/media/types.ts
@@ -66,6 +66,7 @@ export type AudioFeatures = [
   PlayerFeature<MediaTimeState>,
   PlayerFeature<MediaSourceState>,
   PlayerFeature<MediaBufferState>,
+  PlayerFeature<MediaErrorState>,
 ];
 
 // TODO: Define background video features (e.g., playback, source, buffer)
diff --git a/packages/core/src/dom/store/features/presets.ts b/packages/core/src/dom/store/features/presets.ts
index ef1e77d4..c1e110d2 100644
--- a/packages/core/src/dom/store/features/presets.ts
+++ b/packages/core/src/dom/store/features/presets.ts
@@ -32,6 +32,7 @@ export const audioFeatures: AudioFeatures = [
   timeFeature,
   sourceFeature,
   bufferFeature,
+  errorFeature,
 ];
 
 // TODO: Add background video features (e.g., playback, source, buffer)
diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
index 4e20d097..94fddbb0 100644
--- a/packages/html/src/define/audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -45,7 +45,7 @@ function getTemplateHTML() {
         <media-tooltip-group>
           <div class="${buttonGroup}">
             <span class="${tooltipState.play.wrapper}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
                 ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
                 ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -57,7 +57,7 @@ function getTemplateHTML() {
               </media-tooltip>
             </span>
 
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
               <span class="${iconContainer}">
                 ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
                 <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -67,7 +67,7 @@ function getTemplateHTML() {
               Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
               <span class="${iconContainer}">
                 ${renderIcon('seek', { class: icon })}
                 <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -95,13 +95,13 @@ function getTemplateHTML() {
           </div>
 
           <div class="${buttonGroup}">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
             </media-playback-rate-button>
             <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
               Toggle playback rate
             </media-tooltip>
 
-            <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+            <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
               ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts
index 75895a64..c2760e8a 100644
--- a/packages/html/src/define/audio/minimal-skin.ts
+++ b/packages/html/src/define/audio/minimal-skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
       <div class="media-controls">
         <media-tooltip-group>
           <div class="media-button-group">
-            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
@@ -39,7 +39,7 @@ function getTemplateHTML() {
               <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -49,7 +49,7 @@ function getTemplateHTML() {
               Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -77,13 +77,13 @@ function getTemplateHTML() {
           </div>
 
           <div class="media-button-group">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate">
             </media-playback-rate-button>
             <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
               Toggle playback rate
             </media-tooltip>
 
-            <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
+            <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
               ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index 26bc5654..69377ca7 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -43,7 +43,7 @@ function getTemplateHTML() {
       <div class="${controls}">
         <media-tooltip-group>
           <span class="${tooltipState.play.wrapper}">
-            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
               ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
               ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
               ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -55,7 +55,7 @@ function getTemplateHTML() {
             </media-tooltip>
           </span>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
             <span class="${iconContainer}">
               ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
               <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -65,7 +65,7 @@ function getTemplateHTML() {
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
             <span class="${iconContainer}">
               ${renderIcon('seek', { class: icon })}
               <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -87,12 +87,12 @@ function getTemplateHTML() {
             <media-time type="duration" class="${time.duration}"></media-time>
           </media-time-group>
 
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
           <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
             Toggle playback rate
           </media-tooltip>
 
-          <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+          <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
             ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
             ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
             ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts
index 9d62d7cd..658d5c67 100644
--- a/packages/html/src/define/audio/skin.ts
+++ b/packages/html/src/define/audio/skin.ts
@@ -27,7 +27,7 @@ function getTemplateHTML() {
 
       <div class="media-surface media-controls">
         <media-tooltip-group>
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
             ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
             ${renderIcon('play', { class: 'media-icon media-icon--play' })}
             ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
@@ -38,7 +38,7 @@ function getTemplateHTML() {
             <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
             <span class="media-icon__container">
               ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
               <span class="media-icon__label">${SEEK_TIME}</span>
@@ -48,7 +48,7 @@ function getTemplateHTML() {
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
             <span class="media-icon__container">
               ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
               <span class="media-icon__label">${SEEK_TIME}</span>
@@ -70,12 +70,12 @@ function getTemplateHTML() {
             <media-time type="duration" class="media-time__value"></media-time>
           </media-time-group>
 
-          <media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
           <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
             Toggle playback rate
           </media-tooltip>
 
-          <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
+          <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
             ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
             ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
             ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts
index 50a38bca..1c8dc81c 100644
--- a/packages/html/src/define/video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/video/minimal-skin.tailwind.ts
@@ -63,7 +63,7 @@ function getTemplateHTML() {
         <media-tooltip-group>
           <div class="${buttonGroup}">
             <span class="${tooltipState.play.wrapper}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
                 ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
                 ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -75,7 +75,7 @@ function getTemplateHTML() {
               </media-tooltip>
             </span>
 
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
               <span class="${iconContainer}">
                 ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
                 <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -85,7 +85,7 @@ function getTemplateHTML() {
               Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
               <span class="${iconContainer}">
                 ${renderIcon('seek', { class: icon })}
                 <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -121,13 +121,13 @@ function getTemplateHTML() {
           </div>
 
           <div class="${buttonGroup}">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
             </media-playback-rate-button>
             <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
               Toggle playback rate
             </media-tooltip>
 
-            <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+            <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
               ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
@@ -143,7 +143,7 @@ function getTemplateHTML() {
             </media-popover>
 
             <span class="${tooltipState.captions.wrapper}">
-              <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
+              <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
                 ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
                 ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
               </media-captions-button>
@@ -154,7 +154,7 @@ function getTemplateHTML() {
             </span>
 
             <span class="${tooltipState.pip.wrapper}">
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon, iconState.pip.button)}">
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
                 ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
                 ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
               </media-pip-button>
@@ -165,7 +165,7 @@ function getTemplateHTML() {
             </span>
 
             <span class="${tooltipState.fullscreen.wrapper}">
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
                 ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
                 ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
               </media-fullscreen-button>
diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts
index 5de7b8a6..5bfd7a96 100644
--- a/packages/html/src/define/video/minimal-skin.ts
+++ b/packages/html/src/define/video/minimal-skin.ts
@@ -41,7 +41,7 @@ function getTemplateHTML() {
       <media-controls class="media-controls">
         <media-tooltip-group>
           <div class="media-button-group">
-            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
@@ -52,7 +52,7 @@ function getTemplateHTML() {
               <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -62,7 +62,7 @@ function getTemplateHTML() {
               Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon('seek', { class: 'media-icon' })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -98,12 +98,12 @@ function getTemplateHTML() {
           </div>
 
           <div class="media-button-group">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
               Toggle playback rate
             </media-tooltip>
 
-            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
               ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
@@ -118,7 +118,7 @@ function getTemplateHTML() {
               </media-volume-slider>
             </media-popover>
 
-            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
               ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
               ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
             </media-captions-button>
@@ -126,7 +126,7 @@ function getTemplateHTML() {
               Toggle captions
             </media-tooltip>
 
-            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
               ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
               ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
             </media-pip-button>
@@ -135,7 +135,7 @@ function getTemplateHTML() {
               <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
             </media-tooltip>
 
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
               ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
               ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
             </media-fullscreen-button>
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 33941f35..074332ef 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -63,7 +63,7 @@ function getTemplateHTML() {
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
           <span class="${tooltipState.play.wrapper}">
-            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
               ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
               ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
               ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -75,7 +75,7 @@ function getTemplateHTML() {
             </media-tooltip>
           </span>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
             <span class="${iconContainer}">
               ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
               <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -85,7 +85,7 @@ function getTemplateHTML() {
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
             <span class="${iconContainer}">
               ${renderIcon('seek', { class: icon })}
               <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -113,12 +113,12 @@ function getTemplateHTML() {
             <media-time type="duration" class="${time.duration}"></media-time>
           </media-time-group>
 
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
           <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
             Toggle playback rate
           </media-tooltip>
 
-          <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+          <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
             ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
             ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
             ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
@@ -134,7 +134,7 @@ function getTemplateHTML() {
           </media-popover>
 
           <span class="${tooltipState.captions.wrapper}">
-            <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
+            <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
               ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
               ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
             </media-captions-button>
@@ -145,7 +145,7 @@ function getTemplateHTML() {
           </span>
 
           <span class="${tooltipState.pip.wrapper}">
-            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon, iconState.pip.button)}">
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
               ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
               ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
             </media-pip-button>
@@ -156,7 +156,7 @@ function getTemplateHTML() {
           </span>
 
           <span class="${tooltipState.fullscreen.wrapper}">
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
               ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
               ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
             </media-fullscreen-button>
diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts
index 18e00283..380d4a46 100644
--- a/packages/html/src/define/video/skin.ts
+++ b/packages/html/src/define/video/skin.ts
@@ -43,7 +43,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
             ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
             ${renderIcon('play', { class: 'media-icon media-icon--play' })}
             ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
@@ -54,7 +54,7 @@ function getTemplateHTML() {
             <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
             <span class="media-icon__container">
               ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
               <span class="media-icon__label">${SEEK_TIME}</span>
@@ -64,7 +64,7 @@ function getTemplateHTML() {
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
             <span class="media-icon__container">
               ${renderIcon('seek', { class: 'media-icon' })}
               <span class="media-icon__label">${SEEK_TIME}</span>
@@ -92,12 +92,12 @@ function getTemplateHTML() {
             <media-time type="duration" class="media-time__value"></media-time>
           </media-time-group>
 
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
           <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
             Toggle playback rate
           </media-tooltip>
 
-          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
             ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
             ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
             ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
@@ -112,7 +112,7 @@ function getTemplateHTML() {
             </media-volume-slider>
           </media-popover>
 
-          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
             ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
             ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
           </media-captions-button>
@@ -121,7 +121,7 @@ function getTemplateHTML() {
             <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
           </media-tooltip>
 
-          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
             ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
             ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
           </media-pip-button>
@@ -130,7 +130,7 @@ function getTemplateHTML() {
             <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
           </media-tooltip>
 
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
             ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
             ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
           </media-fullscreen-button>
diff --git a/packages/html/src/player/tests/create-player.test-d.ts b/packages/html/src/player/tests/create-player.test-d.ts
index 29c94a85..27818b5a 100644
--- a/packages/html/src/player/tests/create-player.test-d.ts
+++ b/packages/html/src/player/tests/create-player.test-d.ts
@@ -16,6 +16,12 @@ describe('createPlayer', () => {
     const result = createPlayer({ features: audioFeatures });
 
     assertType<CreatePlayerResult<AudioPlayerStore>>(result);
+
+    const store = result.create();
+
+    assertType<number | undefined>(store.error?.code);
+    assertType<string | undefined>(store.error?.message);
+    assertType<() => void>(store.dismissError);
   });
 
   it('resolves spread video features to VideoPlayerStore', () => {
diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
index a74e1f19..198e4f9c 100644
--- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
@@ -12,6 +12,7 @@ import {
   button,
   buttonGroup,
   controls,
+  error,
   icon,
   iconContainer,
   iconFlipped,
@@ -34,23 +35,26 @@ import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
+import { ErrorDialog } from '../error-dialog';
 import type { MinimalAudioSkinProps } from './minimal-skin';
 
 const SEEK_TIME = 10;
 
+const ERROR_CLASSNAMES = {
+  root: error.root,
+  dialog: error.dialog,
+  content: error.content,
+  title: error.title,
+  description: error.description,
+  actions: error.actions,
+  close: cn(button.base, button.subtle),
+};
+
 /* --------------------------------------- Components ---------------------------------------- */
 
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(
-  { className, variant, ...props },
-  ref
-) {
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
   return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}
-      {...props}
-    />
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
   );
 });
 
@@ -106,7 +110,7 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={iconState.mute.button} render={<Button variant="icon" />}>
+    <MuteButton className={iconState.mute.button} render={<Button />}>
       <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
       <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
       <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
@@ -139,13 +143,15 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
     <Container className={cn(root, className)} {...rest}>
       {children}
 
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
+
       <div className={controls}>
         <Tooltip.Provider>
           <div className={buttonGroup}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={iconState.play.button} render={<Button variant="icon" />}>
+                  <PlayButton className={iconState.play.button} render={<Button />}>
                     <RestartIcon className={cn(icon, iconState.play.restart)} />
                     <PlayIcon className={cn(icon, iconState.play.play)} />
                     <PauseIcon className={cn(icon, iconState.play.pause)} />
@@ -160,7 +166,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                  <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button />}>
                     <span className={iconContainer}>
                       <SeekIcon className={cn(icon, iconFlipped)} />
                       <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
@@ -174,7 +180,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                  <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button />}>
                     <span className={iconContainer}>
                       <SeekIcon className={icon} />
                       <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
@@ -204,9 +210,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
 
           <div className={buttonGroup}>
             <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={<PlaybackRateButton className={playbackRate.button} render={<Button variant="icon" />} />}
-              />
+              <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />
               <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
             </Tooltip.Root>
 
diff --git a/packages/react/src/presets/audio/minimal-skin.tsx b/packages/react/src/presets/audio/minimal-skin.tsx
index c4726d7c..c0ebe58c 100644
--- a/packages/react/src/presets/audio/minimal-skin.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tsx
@@ -19,14 +19,32 @@ import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
+import { ErrorDialog } from '../error-dialog';
 import type { BaseSkinProps } from '../types';
 
-const SEEK_TIME = 10;
-
 export type MinimalAudioSkinProps = BaseSkinProps;
 
+const SEEK_TIME = 10;
+
+const ERROR_CLASSNAMES = {
+  root: 'media-error',
+  dialog: 'media-error__dialog',
+  content: 'media-error__content',
+  title: 'media-error__title',
+  description: 'media-error__description',
+  actions: 'media-error__actions',
+  close: 'media-button media-button--subtle',
+};
+
 const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return <button ref={ref} type="button" className={cn('media-button media-button--icon', className)} {...props} />;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
 });
 
 function PlayLabel(): string {
@@ -71,6 +89,8 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
     <Container className={cn('media-minimal-skin media-minimal-skin--audio', className)} {...rest}>
       {children}
 
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
+
       <div className="media-controls">
         <Tooltip.Provider>
           <div className="media-button-group">
diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx
index 34aaf7ec..44b079cf 100644
--- a/packages/react/src/presets/audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/skin.tailwind.tsx
@@ -10,6 +10,7 @@ import {
 import {
   button,
   controls,
+  error,
   icon,
   iconContainer,
   iconFlipped,
@@ -33,23 +34,26 @@ import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
+import { ErrorDialog } from '../error-dialog';
 import type { AudioSkinProps } from './skin';
 
 const SEEK_TIME = 10;
 
+const ERROR_CLASSNAMES = {
+  root: error.root,
+  dialog: error.dialog,
+  content: error.content,
+  title: error.title,
+  description: error.description,
+  actions: error.actions,
+  close: cn(button.base, button.subtle),
+};
+
 /* --------------------------------------- Components ---------------------------------------- */
 
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(
-  { className, variant, ...props },
-  ref
-) {
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
   return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}
-      {...props}
-    />
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
   );
 });
 
@@ -105,7 +109,7 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={iconState.mute.button} render={<Button variant="icon" />}>
+    <MuteButton className={iconState.mute.button} render={<Button />}>
       <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
       <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
       <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
@@ -138,12 +142,14 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
     <Container className={cn(root, className)} {...rest}>
       {children}
 
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
+
       <div className={controls}>
         <Tooltip.Provider>
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <PlayButton className={iconState.play.button} render={<Button variant="icon" />}>
+                <PlayButton className={iconState.play.button} render={<Button />}>
                   <RestartIcon className={cn(icon, iconState.play.restart)} />
                   <PlayIcon className={cn(icon, iconState.play.play)} />
                   <PauseIcon className={cn(icon, iconState.play.pause)} />
@@ -158,7 +164,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button />}>
                   <span className={iconContainer}>
                     <SeekIcon className={cn(icon, iconFlipped)} />
                     <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
@@ -172,7 +178,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button />}>
                   <span className={iconContainer}>
                     <SeekIcon className={icon} />
                     <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
@@ -196,9 +202,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
           </Time.Group>
 
           <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={<PlaybackRateButton className={playbackRate.button} render={<Button variant="icon" />} />}
-            />
+            <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />
             <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
diff --git a/packages/react/src/presets/audio/skin.tsx b/packages/react/src/presets/audio/skin.tsx
index e5496ad1..2b2be95f 100644
--- a/packages/react/src/presets/audio/skin.tsx
+++ b/packages/react/src/presets/audio/skin.tsx
@@ -19,14 +19,32 @@ import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
+import { ErrorDialog } from '../error-dialog';
 import type { BaseSkinProps } from '../types';
 
 const SEEK_TIME = 10;
 
+const ERROR_CLASSNAMES = {
+  root: 'media-error',
+  dialog: 'media-error__dialog',
+  content: 'media-error__content',
+  title: 'media-error__title',
+  description: 'media-error__description',
+  actions: 'media-error__actions',
+  close: 'media-button media-button--subtle',
+};
+
 export type AudioSkinProps = BaseSkinProps;
 
 const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return <button ref={ref} type="button" className={cn('media-button media-button--icon', className)} {...props} />;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
 });
 
 function PlayLabel(): string {
@@ -71,6 +89,8 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
     <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>
       {children}
 
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
+
       <div className="media-surface media-controls">
         <Tooltip.Provider>
           <Tooltip.Root side="top">
diff --git a/packages/react/src/presets/video/error-dialog.tsx b/packages/react/src/presets/error-dialog.tsx
similarity index 52%
rename from packages/react/src/presets/video/error-dialog.tsx
rename to packages/react/src/presets/error-dialog.tsx
index 9a517467..b4640be0 100644
--- a/packages/react/src/presets/video/error-dialog.tsx
+++ b/packages/react/src/presets/error-dialog.tsx
@@ -5,7 +5,7 @@ import { type ReactNode, useRef } from 'react';
 import { usePlayer } from '@/player/context';
 import { AlertDialog } from '@/ui/alert-dialog';
 
-export interface ErrorDialogClasses {
+export interface ErrorDialogClassNames {
   root?: string;
   dialog?: string;
   content?: string;
@@ -15,7 +15,7 @@ export interface ErrorDialogClasses {
   close?: string;
 }
 
-export function ErrorDialog({ classes }: { classes?: ErrorDialogClasses }): ReactNode {
+export function ErrorDialog({ classNames }: { classNames?: ErrorDialogClassNames }): ReactNode {
   const errorState = usePlayer(selectError);
   const lastError = useRef(errorState?.error);
 
@@ -25,21 +25,21 @@ export function ErrorDialog({ classes }: { classes?: ErrorDialogClasses }): Reac
 
   return (
     <AlertDialog.Root
-      open={!!errorState.error}
+      open={Boolean(errorState.error)}
       onOpenChange={(open) => {
         if (!open) errorState.dismissError();
       }}
     >
-      <AlertDialog.Popup className={classes?.root}>
-        <div className={classes?.dialog}>
-          <div className={classes?.content}>
-            <AlertDialog.Title className={classes?.title}>Something went wrong.</AlertDialog.Title>
-            <AlertDialog.Description className={classes?.description}>
-              {lastError.current?.message ?? 'An error occurred while trying to play the video. Please try again.'}
+      <AlertDialog.Popup className={classNames?.root}>
+        <div className={classNames?.dialog}>
+          <div className={classNames?.content}>
+            <AlertDialog.Title className={classNames?.title}>Something went wrong.</AlertDialog.Title>
+            <AlertDialog.Description className={classNames?.description}>
+              {lastError.current?.message ?? 'An error occurred. Please try again.'}
             </AlertDialog.Description>
           </div>
-          <div className={classes?.actions}>
-            <AlertDialog.Close className={classes?.close}>OK</AlertDialog.Close>
+          <div className={classNames?.actions}>
+            <AlertDialog.Close className={classNames?.close}>OK</AlertDialog.Close>
           </div>
         </div>
       </AlertDialog.Popup>
diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
index f6a1a6cd..cd5a5506 100644
--- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
@@ -55,24 +55,26 @@ import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
 import { isRenderProp } from '@/utils/use-render';
-import { ErrorDialog } from './error-dialog';
+import { ErrorDialog } from '../error-dialog';
 import type { MinimalVideoSkinProps } from './minimal-skin';
 
 const SEEK_TIME = 10;
 
+const ERROR_CLASSNAMES = {
+  root: error.root,
+  dialog: error.dialog,
+  content: error.content,
+  title: error.title,
+  description: error.description,
+  actions: error.actions,
+  close: cn(button.base, button.primary),
+};
+
 /* --------------------------------------- Components ---------------------------------------- */
 
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(
-  { className, variant, ...props },
-  ref
-) {
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
   return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}
-      {...props}
-    />
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
   );
 });
 
@@ -117,15 +119,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
   );
 });
 
-const errorClasses = {
-  root: error.root,
-  dialog: error.dialog,
-  content: error.content,
-  title: error.title,
-  actions: error.actions,
-  close: cn(button.base, button.default),
-};
-
 function PlayLabel(): string {
   const paused = usePlayer((s) => Boolean(s.paused));
   const ended = usePlayer((s) => Boolean(s.ended));
@@ -152,7 +145,7 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={iconState.mute.button} render={<Button variant="icon" />}>
+    <MuteButton className={iconState.mute.button} render={<Button />}>
       <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
       <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
       <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
@@ -201,7 +194,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
         )}
       />
 
-      <ErrorDialog classes={errorClasses} />
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
 
       <Controls.Root
         data-controls="" // Used as a hook for Tailwind has-[] styles
@@ -212,7 +205,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={iconState.play.button} render={<Button variant="icon" />}>
+                  <PlayButton className={iconState.play.button} render={<Button />}>
                     <RestartIcon className={cn(icon, iconState.play.restart)} />
                     <PlayIcon className={cn(icon, iconState.play.play)} />
                     <PauseIcon className={cn(icon, iconState.play.pause)} />
@@ -227,7 +220,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                  <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button />}>
                     <span className={iconContainer}>
                       <SeekIcon className={cn(icon, iconFlipped)} />
                       <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
@@ -241,7 +234,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                  <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button />}>
                     <span className={iconContainer}>
                       <SeekIcon className={icon} />
                       <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
@@ -278,9 +271,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
 
           <div className={buttonGroup}>
             <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={<PlaybackRateButton className={playbackRate.button} render={<Button variant="icon" />} />}
-              />
+              <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />
               <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
             </Tooltip.Root>
 
@@ -289,7 +280,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <CaptionsButton className={iconState.captions.button} render={<Button variant="icon" />}>
+                  <CaptionsButton className={iconState.captions.button} render={<Button />}>
                     <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
                     <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
                   </CaptionsButton>
@@ -303,7 +294,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <PiPButton className={iconState.pip.button} render={<Button variant="icon" />}>
+                  <PiPButton className={iconState.pip.button} render={<Button />}>
                     <PipEnterIcon className={cn(icon, iconState.pip.off)} />
                     <PipExitIcon className={cn(icon, iconState.pip.on)} />
                   </PiPButton>
@@ -317,7 +308,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <FullscreenButton className={iconState.fullscreen.button} render={<Button variant="icon" />}>
+                  <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
                     <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
                     <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
                   </FullscreenButton>
diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx
index 1145bf37..ed8cbd6c 100644
--- a/packages/react/src/presets/video/minimal-skin.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tsx
@@ -35,27 +35,34 @@ import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
 import { isRenderProp } from '@/utils/use-render';
+import { ErrorDialog } from '../error-dialog';
 import type { BaseVideoSkinProps } from '../types';
-import { ErrorDialog } from './error-dialog';
 
 const SEEK_TIME = 10;
 
-export type MinimalVideoSkinProps = BaseVideoSkinProps;
-
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return <button ref={ref} type="button" className={cn('media-button media-button--icon', className)} {...props} />;
-});
-
-const errorClasses = {
+const ERROR_CLASSNAMES = {
   root: 'media-error',
   dialog: 'media-error__dialog',
   content: 'media-error__content',
   title: 'media-error__title',
   description: 'media-error__description',
   actions: 'media-error__actions',
-  close: 'media-button',
+  close: 'media-button media-button--subtle',
 };
 
+export type MinimalVideoSkinProps = BaseVideoSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
 function PlayLabel(): string {
   const paused = usePlayer((s) => Boolean(s.paused));
   const ended = usePlayer((s) => Boolean(s.ended));
@@ -125,7 +132,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
         )}
       />
 
-      <ErrorDialog classes={errorClasses} />
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
 
       <Controls.Root className="media-controls">
         <Tooltip.Provider>
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
index 432376fe..6794af1e 100644
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ b/packages/react/src/presets/video/skin.tailwind.tsx
@@ -54,24 +54,26 @@ import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
 import { isRenderProp } from '@/utils/use-render';
-import { ErrorDialog } from './error-dialog';
+import { ErrorDialog } from '../error-dialog';
 import type { VideoSkinProps } from './skin';
 
 const SEEK_TIME = 10;
 
+const ERROR_CLASSNAMES = {
+  root: error.root,
+  dialog: error.dialog,
+  content: error.content,
+  title: error.title,
+  description: error.description,
+  actions: error.actions,
+  close: cn(button.base, button.primary),
+};
+
 /* --------------------------------------- Components ---------------------------------------- */
 
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(
-  { className, variant, ...props },
-  ref
-) {
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
   return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}
-      {...props}
-    />
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
   );
 });
 
@@ -116,16 +118,6 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
   );
 });
 
-const errorClasses = {
-  root: error.root,
-  dialog: error.dialog,
-  content: error.content,
-  title: error.title,
-  description: error.description,
-  actions: error.actions,
-  close: cn(button.base, button.default),
-};
-
 function PlayLabel(): string {
   const paused = usePlayer((s) => Boolean(s.paused));
   const ended = usePlayer((s) => Boolean(s.ended));
@@ -152,7 +144,7 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={iconState.mute.button} render={<Button variant="icon" />}>
+    <MuteButton className={iconState.mute.button} render={<Button />}>
       <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
       <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
       <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
@@ -203,7 +195,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
         )}
       />
 
-      <ErrorDialog classes={errorClasses} />
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
 
       <Controls.Root
         data-controls="" // Used as a hook for Tailwind has-[] styles
@@ -213,7 +205,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <PlayButton className={iconState.play.button} render={<Button variant="icon" />}>
+                <PlayButton className={iconState.play.button} render={<Button />}>
                   <RestartIcon className={cn(icon, iconState.play.restart)} />
                   <PlayIcon className={cn(icon, iconState.play.play)} />
                   <PauseIcon className={cn(icon, iconState.play.pause)} />
@@ -228,7 +220,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<Button />}>
                   <span className={iconContainer}>
                     <SeekIcon className={cn(icon, iconFlipped)} />
                     <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
@@ -242,7 +234,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button variant="icon" />}>
+                <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button />}>
                   <span className={iconContainer}>
                     <SeekIcon className={icon} />
                     <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
@@ -271,9 +263,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           </Time.Group>
 
           <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={<PlaybackRateButton className={playbackRate.button} render={<Button variant="icon" />} />}
-            />
+            <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />
             <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
@@ -282,7 +272,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <CaptionsButton className={iconState.captions.button} render={<Button variant="icon" />}>
+                <CaptionsButton className={iconState.captions.button} render={<Button />}>
                   <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
                   <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
                 </CaptionsButton>
@@ -296,7 +286,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <PiPButton className={iconState.pip.button} render={<Button variant="icon" />}>
+                <PiPButton className={iconState.pip.button} render={<Button />}>
                   <PipEnterIcon className={cn(icon, iconState.pip.off)} />
                   <PipExitIcon className={cn(icon, iconState.pip.on)} />
                 </PiPButton>
@@ -310,7 +300,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
           <Tooltip.Root side="top">
             <Tooltip.Trigger
               render={
-                <FullscreenButton className={iconState.fullscreen.button} render={<Button variant="icon" />}>
+                <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
                   <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
                   <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
                 </FullscreenButton>
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx
index 7b1798a0..dcab111c 100644
--- a/packages/react/src/presets/video/skin.tsx
+++ b/packages/react/src/presets/video/skin.tsx
@@ -35,27 +35,34 @@ import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
 import { VolumeSlider } from '@/ui/volume-slider';
 import { isRenderProp } from '@/utils/use-render';
+import { ErrorDialog } from '../error-dialog';
 import type { BaseVideoSkinProps } from '../types';
-import { ErrorDialog } from './error-dialog';
 
 const SEEK_TIME = 10;
 
-export type VideoSkinProps = BaseVideoSkinProps;
-
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return <button ref={ref} type="button" className={cn('media-button media-button--icon', className)} {...props} />;
-});
-
-const errorClasses = {
+const ERROR_CLASSNAMES = {
   root: 'media-error',
-  dialog: 'media-error__dialog media-surface',
+  dialog: 'media-error__dialog',
   content: 'media-error__content',
   title: 'media-error__title',
   description: 'media-error__description',
   actions: 'media-error__actions',
-  close: 'media-button',
+  close: 'media-button media-button--subtle',
 };
 
+export type VideoSkinProps = BaseVideoSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
 function PlayLabel(): string {
   const paused = usePlayer((s) => Boolean(s.paused));
   const ended = usePlayer((s) => Boolean(s.ended));
@@ -127,7 +134,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
         )}
       />
 
-      <ErrorDialog classes={errorClasses} />
+      <ErrorDialog classNames={ERROR_CLASSNAMES} />
 
       <Controls.Root className="media-surface media-controls">
         <Tooltip.Provider>
diff --git a/packages/sandbox/app/shell/navbar.tsx b/packages/sandbox/app/shell/navbar.tsx
index 3b7cafe1..1f6434b2 100644
--- a/packages/sandbox/app/shell/navbar.tsx
+++ b/packages/sandbox/app/shell/navbar.tsx
@@ -66,7 +66,7 @@ export function Navbar({
 
       <div className="h-5 w-px bg-zinc-200 dark:bg-zinc-800" />
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 overflow-auto p-2">
         <Select
           label="Platform"
           value={platform}
diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css
index 4561c8f7..2d6cafec 100644
--- a/packages/skins/src/default/css/audio.css
+++ b/packages/skins/src/default/css/audio.css
@@ -1,5 +1,3 @@
-@import "../../shared/css/audio/icon-state.css";
-@import "../../shared/css/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
@@ -11,6 +9,8 @@
 @import "./components/icons.css";
 @import "./components/slider.css";
 @import "./components/popup.css";
+@import "../../shared/css/audio/icon-state.css";
+@import "../../shared/css/audio/tooltip-state.css";
 
 /* ==========================================================================
    Root
@@ -23,26 +23,68 @@
   --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
   --media-surface-backdrop-filter: blur(16px) saturate(1.5);
-  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
+  --media-text-color: var(--media-color-primary, oklch(0 0 0));
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);
     --media-surface-background-color: oklch(0 0 0 / 0.4);
-    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
+    --media-text-color: var(--media-color-primary, oklch(1 0 0));
   }
 }
 
+/* ==========================================================================
+   Error Dialog
+   ========================================================================== */
+
+.media-default-skin--audio .media-error__dialog {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-inline: 1.25rem 0.125rem;
+  transition-property: opacity, filter;
+  transition-duration: 300ms;
+  transition-delay: 100ms;
+  transition-timing-function: ease-out;
+  border-radius: calc(infinity * 1px);
+  background-color: var(--media-surface-background-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  color: var(--media-text-color);
+
+  /* Simple, fast transition for reduced motion users */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 100ms;
+    transition-delay: 0ms;
+  }
+}
+
+.media-default-skin .media-error[data-starting-style] .media-error__dialog,
+.media-default-skin .media-error[data-ending-style] .media-error__dialog {
+  opacity: 0;
+  filter: blur(4px);
+}
+
+.media-default-skin--audio .media-error__content {
+  flex: 1;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 /* ==========================================================================
   Controls
   ========================================================================== */
 
 .media-default-skin--audio .media-controls {
-  color: var(--media-controls-text-color);
+  color: var(--media-text-color);
 }
 
 /* ==========================================================================
    Sliders
    ========================================================================== */
+
 .media-default-skin--audio .media-slider__track {
   background-color: oklch(0 0 0 / 0.1);
 
diff --git a/packages/skins/src/default/css/components/buttons.css b/packages/skins/src/default/css/components/buttons.css
index 7c00bca4..ea79fc64 100644
--- a/packages/skins/src/default/css/components/buttons.css
+++ b/packages/skins/src/default/css/components/buttons.css
@@ -9,15 +9,11 @@
   justify-content: center;
   flex-shrink: 0;
   padding: 0.5rem 1rem;
-  background: oklch(1 0 0);
   border: none;
   border-radius: calc(infinity * 1px);
   outline: 2px solid transparent;
   outline-offset: -2px;
-  color: oklch(0 0 0);
-  font-weight: 500;
-  text-align: center;
-  transition-property: background-color, color, outline-offset, scale;
+  transition-property: background-color, outline-offset, scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -25,10 +21,14 @@
   touch-action: manipulation;
 
   &:focus-visible {
-    outline-color: oklch(62.3% 0.214 259.815);
+    outline-color: currentColor;
     outline-offset: 2px;
   }
 
+  &:active {
+    scale: 0.98;
+  }
+
   &[disabled] {
     opacity: 0.5;
     filter: grayscale(1);
@@ -40,12 +40,16 @@
   }
 }
 
-/* Icon button variant */
-.media-default-skin .media-button--icon {
-  display: grid;
-  width: 2.125rem;
-  padding: 0;
-  aspect-ratio: 1;
+/* Primary button variant */
+.media-default-skin .media-button--primary {
+  background: oklch(1 0 0);
+  color: oklch(0 0 0);
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Subtle button variant */
+.media-default-skin .media-button--subtle {
   background: transparent;
   color: inherit;
   text-shadow: inherit;
@@ -56,6 +60,14 @@
     background-color: oklch(from currentColor l c h / 0.1);
     text-decoration: none;
   }
+}
+
+/* Icon button variant */
+.media-default-skin .media-button--icon {
+  display: grid;
+  width: 2.125rem;
+  padding: 0;
+  aspect-ratio: 1;
 
   &:active {
     scale: 0.9;
@@ -72,7 +84,7 @@
     position: absolute;
     right: -1px;
     bottom: -3px;
-    font-size: 0.75em;
+    font-size: 10px;
     font-weight: 480;
     font-variant-numeric: tabular-nums;
   }
diff --git a/packages/skins/src/default/css/components/error.css b/packages/skins/src/default/css/components/error.css
index b21d9c10..50b2122e 100644
--- a/packages/skins/src/default/css/components/error.css
+++ b/packages/skins/src/default/css/components/error.css
@@ -3,57 +3,7 @@
    ========================================================================== */
 
 .media-default-skin .media-error {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.media-default-skin .media-error__dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  max-width: 18rem;
-  padding: 0.75rem;
-  border-radius: 1.75rem;
-  color: oklch(1 0 0);
-  font-size: 0.875rem;
-  transition-property: opacity, scale;
-  transition-duration: 500ms;
-  transition-delay: 100ms;
-  transition-timing-function: linear(
-    0,
-    0.034 1.5%,
-    0.763 9.7%,
-    1.066 13.9%,
-    1.198 19.9%,
-    1.184 21.8%,
-    0.963 37.5%,
-    0.997 50.9%,
-    1
-  );
-
-  /* Simple, fast transition for reduced motion users */
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 100ms;
-    transition-delay: 0ms;
-    transition-timing-function: ease-out;
-  }
-}
-
-.media-default-skin .media-error[data-starting-style] .media-error__dialog,
-.media-default-skin .media-error[data-ending-style] .media-error__dialog {
-  opacity: 0;
-  scale: 0.5;
-}
-
-.media-default-skin .media-error__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 0.5rem 0.375rem;
+  outline: none;
 }
 
 .media-default-skin .media-error__title {
@@ -74,3 +24,7 @@
     flex: 1;
   }
 }
+
+.media-default-skin .media-error[data-open] ~ .media-controls * {
+  visibility: hidden;
+}
diff --git a/packages/skins/src/default/css/components/slider.css b/packages/skins/src/default/css/components/slider.css
index 0bc70f5e..e639aba9 100644
--- a/packages/skins/src/default/css/components/slider.css
+++ b/packages/skins/src/default/css/components/slider.css
@@ -79,6 +79,22 @@
     outline-color: oklch(from currentColor l c h / 0.25);
     outline-offset: 0;
   }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    border-radius: inherit;
+    box-shadow: 0 0 0 2px oklch(1 0 0);
+    transition-property: opacity, scale;
+    transition-duration: 150ms;
+    transition-timing-function: ease-out;
+  }
+
+  &:not(:focus-visible)::after {
+    scale: 0.5;
+    opacity: 0;
+  }
 }
 
 .media-default-skin .media-slider:active .media-slider__thumb,
diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css
index e71d8ce0..6574c44d 100644
--- a/packages/skins/src/default/css/video.css
+++ b/packages/skins/src/default/css/video.css
@@ -1,5 +1,3 @@
-@import "../../shared/css/video/icon-state.css";
-@import "../../shared/css/video/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
@@ -16,6 +14,8 @@
 @import "./components/slider.css";
 @import "./components/popup.css";
 @import "./components/captions.css";
+@import "../../shared/css/video/icon-state.css";
+@import "../../shared/css/video/tooltip-state.css";
 
 /* ==========================================================================
    Root
@@ -67,6 +67,69 @@
   }
 }
 
+/* ==========================================================================
+   Error Dialog
+   ========================================================================== */
+
+.media-default-skin--video .media-error {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-default-skin--video .media-error__dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 18rem;
+  padding: 0.75rem;
+  border-radius: 1.75rem;
+  color: oklch(1 0 0);
+  text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
+  transition-property: opacity, scale;
+  transition-duration: 500ms;
+  transition-delay: 100ms;
+  transition-timing-function: linear(
+    0,
+    0.034 1.5%,
+    0.763 9.7%,
+    1.066 13.9%,
+    1.198 19.9%,
+    1.184 21.8%,
+    0.963 37.5%,
+    0.997 50.9%,
+    1
+  );
+
+  /* Simple, fast transition for reduced motion users */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 100ms;
+    transition-delay: 0ms;
+    transition-timing-function: ease-out;
+  }
+}
+
+.media-default-skin .media-error[data-starting-style] .media-error__dialog,
+.media-default-skin .media-error[data-ending-style] .media-error__dialog {
+  opacity: 0;
+  scale: 0.5;
+}
+
+.media-default-skin--video .media-error__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.375rem;
+  text-shadow: inherit;
+}
+
+.media-default-skin--video .media-error__title {
+  font-size: 1rem;
+}
+
 /* ==========================================================================
    Controls (hide/show behavior)
    ========================================================================== */
@@ -111,6 +174,10 @@
   }
 }
 
+.media-default-skin--video .media-error[data-open] ~ .media-controls {
+  display: none;
+}
+
 /* Hide cursor when controls are hidden in fullscreen */
 @media (pointer: fine) {
   .media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts
index 90961bcc..f553ff85 100644
--- a/packages/skins/src/default/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/default/tailwind/audio.tailwind.ts
@@ -13,8 +13,8 @@ import { surface as baseSurface } from './components/surface';
 
 export const root = cn(
   baseRoot,
-  '[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
-  'dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]'
+  '[--media-text-color:var(--media-color-primary,oklch(0_0_0))]',
+  'dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]'
 );
 
 /* ==========================================================================
@@ -39,7 +39,7 @@ export const surface = cn(
    Controls
    ========================================================================== */
 
-export const controls = cn(baseControls, surface, 'text-(--media-controls-text-color)');
+export const controls = cn(baseControls, surface, 'text-(--media-text-color)', 'peer-data-open/error:[&_*]:invisible');
 
 /* ==========================================================================
    Sliders
@@ -75,7 +75,16 @@ export const bufferingIndicator = {
 
 export const error = {
   ...baseError,
-  dialog: cn(baseError.dialog, surface),
+  dialog: cn(
+    'absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5',
+    'bg-(--media-surface-background-color) text-(--media-text-color)',
+    'backdrop-blur-lg backdrop-saturate-150',
+    'transition-[opacity,filter] duration-300 delay-100 ease-out',
+    'group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]',
+    'group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]',
+    'motion-reduce:duration-100 motion-reduce:delay-0'
+  ),
+  content: 'flex flex-1 items-center gap-2',
 };
 
 /* ==========================================================================
diff --git a/packages/skins/src/default/tailwind/components/button.ts b/packages/skins/src/default/tailwind/components/button.ts
index 66c92273..182f4896 100644
--- a/packages/skins/src/default/tailwind/components/button.ts
+++ b/packages/skins/src/default/tailwind/components/button.ts
@@ -2,21 +2,21 @@ import { cn } from '@videojs/utils/style';
 
 export const button = {
   base: cn(
-    'items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
-    'font-medium',
+    'flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
+    'py-2 px-4 rounded-full',
     'outline-2 outline-transparent -outline-offset-2',
-    'transition-[background-color,color,outline-offset,scale] duration-150 ease-out',
+    'transition-[background-color,outline-offset,scale] duration-150 ease-out',
+    'active:scale-[0.98]',
     'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
-    'focus-visible:outline-blue-500 focus-visible:outline-offset-2',
+    'focus-visible:outline-current focus-visible:outline-offset-2',
     'data-[availability=unavailable]:hidden'
   ),
-  icon: cn(
-    'grid w-[2.125rem] aspect-square bg-transparent rounded-full',
-    'text-inherit text-shadow-inherit',
+  primary: 'bg-white text-black font-medium text-center',
+  subtle: cn(
+    'bg-transparent text-inherit text-shadow-inherit',
     'hover:bg-current/10 hover:no-underline',
     'focus-visible:bg-current/10',
-    'aria-expanded:bg-current/10',
-    'active:scale-90'
+    'aria-expanded:bg-current/10'
   ),
-  default: cn('flex py-2 px-4 bg-white rounded-full', 'text-black'),
+  icon: cn('grid w-[2.125rem] aspect-square p-0', 'active:scale-90'),
 };
diff --git a/packages/skins/src/default/tailwind/components/error.ts b/packages/skins/src/default/tailwind/components/error.ts
index 0d77c79f..0f9fde86 100644
--- a/packages/skins/src/default/tailwind/components/error.ts
+++ b/packages/skins/src/default/tailwind/components/error.ts
@@ -1,9 +1,9 @@
 import { cn } from '@videojs/utils/style';
 
 export const error = {
-  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center',
+  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center outline-none',
   dialog: cn(
-    'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm',
+    'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white',
     // Animation
     'transition-[opacity,scale,transform] duration-500 delay-100',
     'ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',
diff --git a/packages/skins/src/default/tailwind/components/seek.ts b/packages/skins/src/default/tailwind/components/seek.ts
index 57f08ebf..03c2b51f 100644
--- a/packages/skins/src/default/tailwind/components/seek.ts
+++ b/packages/skins/src/default/tailwind/components/seek.ts
@@ -1,6 +1,6 @@
 export const seek = {
   button: '@max-md/media-controls:hidden',
-  label: 'text-[0.75em] font-[480] tabular-nums',
+  label: 'text-[10px] font-[480] tabular-nums',
   labelForward: 'absolute -right-px -bottom-0.75',
   labelBackward: 'absolute -left-px -bottom-0.75',
 };
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index 493b7b34..8ac258b4 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -87,6 +87,7 @@ export const controls = cn(
   // Position
   'absolute bottom-3 inset-x-3',
   '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
+  'peer-data-open/error:hidden',
   'ease-out origin-bottom',
   'duration-(--media-controls-transition-duration)',
   'delay-(--media-controls-transition-delay)',
@@ -153,7 +154,9 @@ export const bufferingIndicator = {
 
 export const error = {
   ...baseError,
-  dialog: cn(baseError.dialog, surface),
+  dialog: cn(baseError.dialog, surface, 'text-shadow-[0_1px_0_oklch(0_0_0/0.25)]'),
+  content: cn(baseError.content, 'text-shadow-inherit'),
+  title: cn(baseError.title, 'text-base'),
 };
 
 /* ==========================================================================
diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css
index 5cd6ba8a..ca202a97 100644
--- a/packages/skins/src/minimal/css/audio.css
+++ b/packages/skins/src/minimal/css/audio.css
@@ -1,5 +1,3 @@
-@import "../../shared/css/audio/icon-state.css";
-@import "../../shared/css/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/buffering.css";
@@ -10,6 +8,8 @@
 @import "./components/icons.css";
 @import "./components/slider.css";
 @import "./components/popup.css";
+@import "../../shared/css/audio/icon-state.css";
+@import "../../shared/css/audio/tooltip-state.css";
 
 /* ==========================================================================
   Root
@@ -18,26 +18,67 @@
 .media-minimal-skin--audio {
   --media-controls-background-color: oklch(1 0 0);
   --media-controls-border-color: oklch(0 0 0 / 0.1);
-  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
+  --media-controls-padding: 0.375rem;
+  --media-text-color: var(--media-color-primary, oklch(0 0 0));
 
   @media (prefers-color-scheme: dark) {
     --media-controls-background-color: oklch(0 0 0);
     --media-controls-border-color: oklch(1 0 0 / 0.1);
-    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
+    --media-text-color: var(--media-color-primary, oklch(1 0 0));
   }
 }
 
+/* ==========================================================================
+   Error Dialog
+   ========================================================================== */
+
+.media-minimal-skin--audio .media-error__dialog {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-inline: 1.25rem 0.5rem;
+  transition-property: opacity, filter, scale;
+  transition-duration: 300ms;
+  transition-delay: 100ms;
+  transition-timing-function: ease-out;
+  border-radius: calc(infinity * 1px);
+  background-color: oklch(from var(--media-controls-background-color) l c h / 1);
+
+  /* Simple, fast transition for reduced motion users */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 100ms;
+    transition-delay: 0ms;
+  }
+}
+
+.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,
+.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {
+  opacity: 0;
+  filter: blur(4px);
+  scale: 0.95;
+}
+
+.media-minimal-skin--audio .media-error__content {
+  flex: 1;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 /* ==========================================================================
   Controls
   ========================================================================== */
 
 .media-minimal-skin--audio .media-controls {
   gap: 0.5rem;
-  padding: 0.375rem;
+  padding: var(--media-controls-padding);
   background-color: var(--media-controls-background-color);
   backdrop-filter: blur(16px) saturate(1.5);
-  border-radius: var(--media-border-radius, 0.75rem);
-  color: var(--media-controls-text-color);
+  border-radius: var(--media-controls-radius);
+  color: var(--media-text-color);
   box-shadow: 0 0 0 1px var(--media-controls-border-color);
 }
 
diff --git a/packages/skins/src/minimal/css/components/buttons.css b/packages/skins/src/minimal/css/components/buttons.css
index 15f4fc6d..50f3704e 100644
--- a/packages/skins/src/minimal/css/components/buttons.css
+++ b/packages/skins/src/minimal/css/components/buttons.css
@@ -23,16 +23,11 @@
   justify-content: center;
   flex-shrink: 0;
   padding: 0.5rem 1rem;
-  background: oklch(1 0 0);
   border: none;
-  border-radius: 0.5rem;
+  border-radius: calc(var(--media-controls-radius) - var(--media-controls-padding));
   outline: 2px solid transparent;
   outline-offset: -2px;
-  color: oklch(0 0 0);
-  font-weight: 500;
-  text-align: center;
-  text-shadow: inherit;
-  transition-property: background-color, color, outline-offset, scale;
+  transition-property: background-color, outline-offset, scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -44,6 +39,10 @@
     outline-offset: 2px;
   }
 
+  &:active {
+    scale: 0.98;
+  }
+
   &[disabled] {
     opacity: 0.5;
     filter: grayscale(1);
@@ -55,21 +54,42 @@
   }
 }
 
+/* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
+@supports (corner-shape: squircle) {
+  .media-minimal-skin .media-button {
+    border-radius: var(--media-controls-radius);
+    /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
+    corner-shape: squircle;
+  }
+}
+
+/* Primary button variant */
+.media-minimal-skin .media-button--primary {
+  background: oklch(1 0 0);
+  color: oklch(0 0 0);
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Subtle button variant */
+.media-minimal-skin .media-button--subtle {
+  background: transparent;
+  color: inherit;
+  text-shadow: inherit;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-expanded="true"] {
+    background: oklch(from currentColor l c h / 0.1);
+  }
+}
+
 /* Icon button variant */
 .media-minimal-skin .media-button--icon {
   display: grid;
   width: 2.375rem;
   padding: 0;
   aspect-ratio: 1;
-  background: transparent;
-  color: inherit;
-
-  &:hover,
-  &:focus-visible,
-  &[aria-expanded="true"] {
-    color: oklch(from currentColor l c h / 0.8);
-    text-decoration: none;
-  }
 
   &:active {
     scale: 0.9;
@@ -86,7 +106,7 @@
     position: absolute;
     right: -1px;
     bottom: -3px;
-    font-size: 0.75em;
+    font-size: 10px;
     font-weight: 480;
     font-variant-numeric: tabular-nums;
   }
diff --git a/packages/skins/src/minimal/css/components/error.css b/packages/skins/src/minimal/css/components/error.css
index 7a2c5556..be2f7b83 100644
--- a/packages/skins/src/minimal/css/components/error.css
+++ b/packages/skins/src/minimal/css/components/error.css
@@ -2,61 +2,6 @@
    Error Dialog
    ========================================================================== */
 
-.media-minimal-skin .media-error {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.media-minimal-skin .media-error__dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  max-width: 16rem;
-  padding: 1rem;
-  color: oklch(1 0 0);
-  font-size: 0.875rem;
-  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
-  transition-property: opacity, scale;
-  transition-duration: 500ms;
-  transition-delay: 100ms;
-  transition-timing-function: linear(
-    0,
-    0.034 1.5%,
-    0.763 9.7%,
-    1.066 13.9%,
-    1.198 19.9%,
-    1.184 21.8%,
-    0.963 37.5%,
-    0.997 50.9%,
-    1
-  );
-
-  /* Simple, fast transition for reduced motion users */
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 100ms;
-    transition-delay: 0ms;
-    transition-timing-function: ease-out;
-  }
-}
-
-.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,
-.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {
-  opacity: 0;
-  scale: 0.5;
-}
-
-.media-minimal-skin .media-error__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.375rem 0;
-}
-
 .media-minimal-skin .media-error__title {
   font-weight: 600;
   line-height: 1.25;
@@ -75,3 +20,7 @@
     flex: 1;
   }
 }
+
+.media-minimal-skin .media-error[data-open] ~ .media-controls * {
+  visibility: hidden;
+}
diff --git a/packages/skins/src/minimal/css/components/root.css b/packages/skins/src/minimal/css/components/root.css
index f1113f4e..863ea0eb 100644
--- a/packages/skins/src/minimal/css/components/root.css
+++ b/packages/skins/src/minimal/css/components/root.css
@@ -21,4 +21,6 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+
+  --media-controls-radius: var(--media-border-radius, 1rem);
 }
diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css
index 9a420f94..e6a9d225 100644
--- a/packages/skins/src/minimal/css/video.css
+++ b/packages/skins/src/minimal/css/video.css
@@ -1,5 +1,3 @@
-@import "../../shared/css/video/icon-state.css";
-@import "../../shared/css/video/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/media.css";
@@ -15,6 +13,8 @@
 @import "./components/slider.css";
 @import "./components/popup.css";
 @import "./components/captions.css";
+@import "../../shared/css/video/icon-state.css";
+@import "../../shared/css/video/tooltip-state.css";
 
 /* ==========================================================================
    Root
@@ -25,6 +25,7 @@
   background: oklch(0 0 0);
   --media-border-color: oklch(0 0 0 / 0.15);
   --media-video-border-radius: var(--media-border-radius, 0.75rem);
+  --media-controls-padding: 0.375rem;
   --media-controls-transition-duration: 100ms;
   --media-controls-transition-delay: 0ms;
 
@@ -63,6 +64,74 @@
   }
 }
 
+/* ==========================================================================
+   Error Dialog
+   ========================================================================== */
+
+.media-minimal-skin--video .media-error {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  outline: none;
+}
+
+.media-minimal-skin--video .media-error__dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 16rem;
+  padding: 1rem;
+  color: oklch(1 0 0);
+  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
+  transition-property: opacity, scale;
+  transition-duration: 500ms;
+  transition-delay: 100ms;
+  transition-timing-function: linear(
+    0,
+    0.034 1.5%,
+    0.763 9.7%,
+    1.066 13.9%,
+    1.198 19.9%,
+    1.184 21.8%,
+    0.963 37.5%,
+    0.997 50.9%,
+    1
+  );
+  pointer-events: auto;
+
+  /* Simple, fast transition for reduced motion users */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 100ms;
+    transition-delay: 0ms;
+    transition-timing-function: ease-out;
+  }
+}
+
+.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,
+.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
+  opacity: 0;
+  scale: 0.5;
+}
+
+.media-minimal-skin--video .media-error__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.375rem 0;
+}
+
+.media-minimal-skin--video .media-error__title {
+  font-size: 1.125rem;
+}
+
+.media-minimal-skin--video .media-error[data-open] ~ .media-controls {
+  display: none;
+}
+
 /* ==========================================================================
   Controls (hide/show behavior)
   ========================================================================== */
@@ -73,7 +142,7 @@
   inset-inline: 0;
   z-index: 10;
   gap: 0.5rem;
-  padding: 2rem 0.375rem 0.375rem 0.375rem;
+  padding: 2rem var(--media-controls-padding) var(--media-controls-padding) var(--media-controls-padding);
   color: var(--media-color-primary, oklch(1 0 0));
   transition-duration: var(--media-controls-transition-duration);
   transition-delay: var(--media-controls-transition-delay);
diff --git a/packages/skins/src/minimal/tailwind/audio.tailwind.ts b/packages/skins/src/minimal/tailwind/audio.tailwind.ts
index 46821aea..fa73b972 100644
--- a/packages/skins/src/minimal/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/audio.tailwind.ts
@@ -1,5 +1,6 @@
 import { cn } from '@videojs/utils/style';
 import { controls as baseControls } from './components/controls';
+import { error as baseError } from './components/error';
 import { popup as basePopup } from './components/popup';
 import { root as baseRoot } from './components/root';
 
@@ -11,10 +12,11 @@ export const root = cn(
   baseRoot,
   '[--media-controls-background-color:oklch(1_0_0)]',
   '[--media-controls-border-color:oklch(0_0_0/0.1)]',
-  '[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
+  '[--media-controls-padding:0.375rem]',
+  '[--media-text-color:var(--media-color-primary,oklch(0_0_0))]',
   'dark:[--media-controls-background-color:oklch(0_0_0)]',
   'dark:[--media-controls-border-color:oklch(1_0_0/0.1)]',
-  'dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]'
+  'dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]'
 );
 
 /* ==========================================================================
@@ -25,10 +27,11 @@ export const controls = cn(
   baseControls,
   // Layout
   'gap-2 p-1.5',
+  'peer-data-open/error:[&_*]:invisible',
   // Appearance
   'rounded-(--media-border-radius,0.75rem)',
   'bg-(--media-controls-background-color)',
-  'text-(--media-controls-text-color)',
+  'text-(--media-text-color)',
   // Backdrop filter
   'backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]',
   // Border
@@ -49,6 +52,23 @@ export const popup = {
   ),
 };
 
+/* ==========================================================================
+   Error
+   ========================================================================== */
+
+export const error = {
+  ...baseError,
+  dialog: cn(
+    'absolute inset-0 z-20 flex items-center gap-4 rounded-full px-5 pr-2',
+    'bg-(--media-controls-background-color)',
+    'transition-[opacity,filter,scale] duration-300 delay-100 ease-out',
+    'group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px] group-data-starting-style/error:scale-95',
+    'group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px] group-data-ending-style/error:scale-95',
+    'motion-reduce:duration-100 motion-reduce:delay-0'
+  ),
+  content: 'flex flex-1 items-center gap-2',
+};
+
 /* ==========================================================================
    Shared components (no overrides)
    ========================================================================== */
@@ -58,7 +78,6 @@ export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { bufferingIndicator } from './components/buffering';
 export { button } from './components/button';
 export { buttonGroup } from './components/button-group';
-export { error } from './components/error';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
 export { seek } from './components/seek';
 export { slider } from './components/slider';
diff --git a/packages/skins/src/minimal/tailwind/components/button.ts b/packages/skins/src/minimal/tailwind/components/button.ts
index e3146c57..2e6d2bca 100644
--- a/packages/skins/src/minimal/tailwind/components/button.ts
+++ b/packages/skins/src/minimal/tailwind/components/button.ts
@@ -2,21 +2,23 @@ import { cn } from '@videojs/utils/style';
 
 export const button = {
   base: cn(
-    'items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
+    'flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
+    'py-2 px-4 rounded-[calc(var(--media-controls-radius)-var(--media-controls-padding))]',
     'outline-2 outline-transparent -outline-offset-2',
-    'font-medium text-shadow-inherit',
-    'transition-[background-color,color,outline-offset,scale] duration-150 ease-out',
+    'transition-[background-color,outline-offset,scale] duration-150 ease-out',
     'focus-visible:outline-current focus-visible:outline-offset-2',
+    'active:scale-[0.98]',
     'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
+    'supports-[corner-shape:squircle]:rounded-(--media-controls-radius)',
+    'supports-[corner-shape:squircle]:[corner-shape:squircle]',
     'data-[availability=unavailable]:hidden'
   ),
-  icon: cn(
-    'grid w-[2.375rem] aspect-square bg-transparent rounded-lg',
-    'text-inherit',
-    'hover:text-current/80 hover:no-underline',
-    'focus-visible:text-current/80',
-    'aria-expanded:text-current/80',
-    'active:scale-90'
+  primary: 'bg-white text-black font-medium text-center',
+  subtle: cn(
+    'bg-transparent text-inherit text-shadow-inherit',
+    'hover:bg-current/10',
+    'focus-visible:bg-current/10',
+    'aria-expanded:bg-current/10'
   ),
-  default: cn('flex py-2 px-4 bg-white rounded-lg', 'text-black'),
+  icon: cn('grid w-[2.375rem] aspect-square p-0', 'active:scale-90'),
 };
diff --git a/packages/skins/src/minimal/tailwind/components/error.ts b/packages/skins/src/minimal/tailwind/components/error.ts
index 37252842..b822851e 100644
--- a/packages/skins/src/minimal/tailwind/components/error.ts
+++ b/packages/skins/src/minimal/tailwind/components/error.ts
@@ -1,9 +1,9 @@
 import { cn } from '@videojs/utils/style';
 
 export const error = {
-  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center',
+  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center outline-none',
   dialog: cn(
-    'flex flex-col gap-3 max-w-64 p-4 text-white text-sm',
+    'flex flex-col gap-3 max-w-64 p-4 text-white',
     'text-shadow-2xs text-shadow-black/50',
     // Animation
     'transition-[opacity,scale,transform] duration-500 delay-100',
diff --git a/packages/skins/src/minimal/tailwind/components/root.ts b/packages/skins/src/minimal/tailwind/components/root.ts
index 5a31ef0a..142e5a4a 100644
--- a/packages/skins/src/minimal/tailwind/components/root.ts
+++ b/packages/skins/src/minimal/tailwind/components/root.ts
@@ -5,6 +5,7 @@ export const root = cn(
   'block relative isolate @container/media-root',
   // Appearance
   'rounded-(--media-border-radius,0.75rem)',
+  '[--media-controls-radius:var(--media-border-radius,1rem)]',
   'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',
   // Resets
   '**:box-border',
diff --git a/packages/skins/src/minimal/tailwind/components/seek.ts b/packages/skins/src/minimal/tailwind/components/seek.ts
index 57f08ebf..03c2b51f 100644
--- a/packages/skins/src/minimal/tailwind/components/seek.ts
+++ b/packages/skins/src/minimal/tailwind/components/seek.ts
@@ -1,6 +1,6 @@
 export const seek = {
   button: '@max-md/media-controls:hidden',
-  label: 'text-[0.75em] font-[480] tabular-nums',
+  label: 'text-[10px] font-[480] tabular-nums',
   labelForward: 'absolute -right-px -bottom-0.75',
   labelBackward: 'absolute -left-px -bottom-0.75',
 };
diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts
index 9ee13ec6..a8c0274d 100644
--- a/packages/skins/src/minimal/tailwind/video.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts
@@ -1,5 +1,6 @@
 import { cn } from '@videojs/utils/style';
 import { controls as baseControls } from './components/controls';
+import { error as baseError } from './components/error';
 import { popup as basePopup } from './components/popup';
 import { preview as basePreview } from './components/preview';
 import { root as baseRoot } from './components/root';
@@ -24,6 +25,7 @@ export const root = (isShadowDOM: boolean) =>
         !isShadowDOM,
     },
     '[--media-video-border-radius:var(--media-border-radius,0.75rem)]',
+    '[--media-controls-padding:0.375rem]',
     '[--media-controls-transition-duration:100ms]',
     '[--media-controls-transition-delay:0ms]',
     '[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]',
@@ -64,8 +66,9 @@ export const controls = cn(
   baseControls,
   // Position
   'absolute bottom-0 inset-x-0',
-  'pt-8 px-1.5 pb-1.5 gap-2',
+  'pt-8 px-(--media-controls-padding) pb-(--media-controls-padding) gap-2',
   '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
+  'peer-data-open/error:hidden',
   'ease-out',
   'duration-(--media-controls-transition-duration)',
   'delay-(--media-controls-transition-delay)',
@@ -82,6 +85,17 @@ export const controls = cn(
   '@sm/media-root:gap-3.5'
 );
 
+/* ==========================================================================
+   Error
+   ========================================================================== */
+
+export const error = {
+  ...baseError,
+  root: cn(baseError.root, 'pointer-events-none outline-none'),
+  dialog: cn(baseError.dialog, 'pointer-events-auto'),
+  title: cn(baseError.title, 'text-lg'),
+};
+
 /* ==========================================================================
    Preview
    ========================================================================== */
@@ -132,7 +146,6 @@ export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { bufferingIndicator } from './components/buffering';
 export { button } from './components/button';
 export { buttonGroup } from './components/button-group';
-export { error } from './components/error';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
 export { overlay } from './components/overlay';
 export { playbackRate } from './components/playback-rate';