diff --git a/src/lib/components/Button/Button.stories.svelte b/src/lib/components/Button/Button.stories.svelte
index 7856651d2..cf697983c 100644
--- a/src/lib/components/Button/Button.stories.svelte
+++ b/src/lib/components/Button/Button.stories.svelte
@@ -6,7 +6,7 @@
 	import Button from './Button.svelte';
 
 	const heights = ['basic', 'small'] as const;
-	const widths = ['basic', 'long'] as const;
+	const widths = ['basic', 'full-width'] as const;
 
 	const content = [
 		[IconHome, 'Label'],
diff --git a/src/lib/components/ButtonGroup/ButtonGroup.stories.svelte b/src/lib/components/ButtonGroup/ButtonGroup.stories.svelte
index be9febd2d..74b9b6a65 100644
--- a/src/lib/components/ButtonGroup/ButtonGroup.stories.svelte
+++ b/src/lib/components/ButtonGroup/ButtonGroup.stories.svelte
@@ -16,7 +16,7 @@
 	<ButtonGroup
 		leftLabel="Cancel"
 		rightLabel="Submit"
-		width="long"
+		width="full-width"
 		leftAction={noop}
 		rightAction={noop}
 	/>
@@ -37,7 +37,7 @@
 		leftLabel="Cancel"
 		rightLabel="Submit"
 		middleLabel="Middle"
-		width="long"
+		width="full-width"
 		leftAction={noop}
 		rightAction={noop}
 	/>
diff --git a/src/lib/components/ButtonGroup/ButtonGroup.svelte b/src/lib/components/ButtonGroup/ButtonGroup.svelte
index 3b3954e3d..31074bdcd 100644
--- a/src/lib/components/ButtonGroup/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup/ButtonGroup.svelte
@@ -7,7 +7,7 @@
 	export let rightAction: () => void;
 	export let middleLabel: string | undefined = undefined;
 	export let middleAction: (() => void) | undefined = undefined;
-	export let width: 'basic' | 'long' = 'basic';
+	export let width: 'basic' | 'full-width' = 'basic';
 </script>
 
 {#if !middleLabel}
@@ -22,13 +22,13 @@
 {:else}
 	<div class="btn-group btn-group--segmented">
 		<button class="joined-base rounded-l-lg border-l border-t border-b" on:click={leftAction}>
-			<span class="my-2 {width === 'long' ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
+			<span class="my-2 {width === 'full-width' ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
 		</button>
 		<button class="joined-base border" on:click={middleAction}>
-			<span class="my-2 {width === 'long' ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
+			<span class="my-2 {width === 'full-width' ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
 		</button>
 		<button class="joined-base rounded-r-lg border-r border-t border-b" on:click={rightAction}>
-			<span class="my-2 {width === 'long' ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
+			<span class="my-2 {width === 'full-width' ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
 		</button>
 	</div>
 {/if}