diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c1c105f3..7d722f42 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -857,10 +857,11 @@ import { ContentSwitcher } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value |
-| :------------ | :------------------- | :------------ |
-| selectedIndex | number
| 0 |
-| light | boolean
| false |
+| Prop name | Type | Default value |
+| :------------ | :---------------------------- | :------------ |
+| selectedIndex | number
| 0 |
+| light | boolean
| false |
+| size | "sm" | "xl"
| -- |
### Slots
diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 0a60a60f..a9c00922 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -31,6 +31,22 @@
+### Extra-large size
+
+
+
+
+
+
+
+### Small size
+
+
+
+
+
+
+
### Disabled
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 791590bb..a4e86eb8 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -11,6 +11,12 @@
*/
export let light = false;
+ /**
+ * Specify the size of the content switcher
+ * @type {"sm" | "xl"} [size]
+ */
+ export let size = undefined;
+
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
@@ -61,6 +67,7 @@
class:bx--content-switcher="{true}"
class:bx--content-switcher--light="{light}"
{...$$restProps}
+ class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
on:click
on:mouseover
on:mouseenter
diff --git a/types/index.d.ts b/types/index.d.ts
index 56024cf9..5b2e8b1c 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -261,7 +261,7 @@ export class ButtonSkeleton extends CarbonSvelteComponent {
size?: "default" | "field" | "small";
/**
- *
+ * Set to `true` to use the small variant
* @default false
*/
small?: boolean;
@@ -717,6 +717,11 @@ export class ContentSwitcher extends CarbonSvelteComponent {
* @default false
*/
light?: boolean;
+
+ /**
+ * Specify the size of the content switcher
+ */
+ size?: "sm" | "xl";
};
$$slot_def: { default: {} };