diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
index adc7ecf5c7..7cbafdadef 100644
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@@ -1,21 +1,15 @@
 <script>
-    import "@spectrum-css/typography/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
 
-    // Sizes
-    export let xl = false;
-    export let l = false;
-    export let m = false;
-    export let s = false;
+  // Sizes
+  export let size = "M"
 
-    export let serif = false;
-    $: useDefault = ![xl, l, m, s].includes(true)
+  export let serif = false
 </script>
 
-<p class="spectrum-Detail"
-    class:spectrum-Detail--serif={serif}
-    class:spectrum-Detail--sizeXL={xl}
-    class:spectrum-Detail--sizeL={l}
-    class:spectrum-Detail--sizeM={m || useDefault}
-    class:spectrum-Detail--sizeS={s}>
-    <slot />
-</p>
\ No newline at end of file
+<p
+  class="spectrum-Detail spectrum-Detail--size{size}"
+  class:spectrum-Detail--serif={serif}
+>
+  <slot />
+</p>