diff --git a/src/Tabs/Tabs.stories.js b/src/Tabs/Tabs.stories.js
index bfd8e04c..7e3984b3 100644
--- a/src/Tabs/Tabs.stories.js
+++ b/src/Tabs/Tabs.stories.js
@@ -13,7 +13,7 @@ export const Default = () => ({
       tabindex: text("Tab index (tabindex in <Tab>)", "0"),
     },
     tabsProps: {
-      className: "some-class",
+      class: "some-class",
       selected: number("The index of the selected tab (selected in <Tabs>)", 1),
       triggerHref: text(
         "The href of trigger button for narrow mode (triggerHref in <Tabs>)",
@@ -28,6 +28,10 @@ export const Default = () => ({
         "The className for the child `<TabContent>` components",
         "tab-content"
       ),
+      light: boolean(
+        "Specify whether or not to use the light component variant",
+        false
+      ),
     },
   },
 });
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 8e42eda6..cb08fba3 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -23,6 +23,12 @@
    */
   export let triggerHref = "#";
 
+  /**
+   * Specify whether or not to use the light component variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
@@ -111,6 +117,7 @@
   role="navigation"
   class:bx--tabs="{true}"
   class:bx--tabs--container="{type === 'container'}"
+  class:bx--tabs--light="{light}"
   {...$$restProps}
 >
   <div