diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index b74b6190..0f5ee035 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -431,22 +431,22 @@ import { Button } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name        | Type                                                                                       | Default value | Description                                                                                                                                                                               |
-| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| kind             | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | `"primary"`   | Specify the kind of button.                                                                                                                                                               |
-| size             | <code>"default" &#124; "field" &#124; "small"</code>                                       | `"default"`   | Specify the size of button.                                                                                                                                                               |
-| hasIconOnly      | <code>boolean</code>                                                                       | `false`       | Set to `true` for the icon-only variant.                                                                                                                                                  |
-| icon             | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code>                        | --            | Specify the icon from `carbon-icons-svelte` to render.                                                                                                                                    |
-| iconDescription  | <code>string</code>                                                                        | --            | Specify the ARIA label for the button icon.                                                                                                                                               |
-| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code>                                          | --            | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`.                                                                                               |
-| tooltipPosition  | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                            | --            | Set the position of the tooltip relative to the icon.                                                                                                                                     |
-| as               | <code>boolean</code>                                                                       | `false`       | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;). |
-| skeleton         | <code>boolean</code>                                                                       | `false`       | Set to `true` to display the skeleton state.                                                                                                                                              |
-| disabled         | <code>boolean</code>                                                                       | `false`       | Set to `true` to disable the button.                                                                                                                                                      |
-| href             | <code>string</code>                                                                        | --            | Set the `href` to use an anchor link.                                                                                                                                                     |
-| tabindex         | <code>string</code>                                                                        | `"0"`         | Specify the tabindex.                                                                                                                                                                     |
-| type             | <code>string</code>                                                                        | `"button"`    | Specify the `type` attribute for the button element.                                                                                                                                      |
-| ref              | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                        | `null`        | Obtain a reference to the HTML element.                                                                                                                                                   |
+| Prop name        | Type                                                                                                                                      | Default value | Description                                                                                                                                                                               |
+| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| kind             | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | `"primary"`   | Specify the kind of button.                                                                                                                                                               |
+| size             | <code>"default" &#124; "field" &#124; "small"</code>                                                                                      | `"default"`   | Specify the size of button.                                                                                                                                                               |
+| hasIconOnly      | <code>boolean</code>                                                                                                                      | `false`       | Set to `true` for the icon-only variant.                                                                                                                                                  |
+| icon             | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code>                                                                       | --            | Specify the icon from `carbon-icons-svelte` to render.                                                                                                                                    |
+| iconDescription  | <code>string</code>                                                                                                                       | --            | Specify the ARIA label for the button icon.                                                                                                                                               |
+| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | --            | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`.                                                                                               |
+| tooltipPosition  | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                           | --            | Set the position of the tooltip relative to the icon.                                                                                                                                     |
+| as               | <code>boolean</code>                                                                                                                      | `false`       | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;). |
+| skeleton         | <code>boolean</code>                                                                                                                      | `false`       | Set to `true` to display the skeleton state.                                                                                                                                              |
+| disabled         | <code>boolean</code>                                                                                                                      | `false`       | Set to `true` to disable the button.                                                                                                                                                      |
+| href             | <code>string</code>                                                                                                                       | --            | Set the `href` to use an anchor link.                                                                                                                                                     |
+| tabindex         | <code>string</code>                                                                                                                       | `"0"`         | Specify the tabindex.                                                                                                                                                                     |
+| type             | <code>string</code>                                                                                                                       | `"button"`    | Specify the `type` attribute for the button element.                                                                                                                                      |
+| ref              | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                       | `null`        | Obtain a reference to the HTML element.                                                                                                                                                   |
 
 ### Slots
 
diff --git a/docs/package.json b/docs/package.json
index 2aff263e..cd9f139e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,7 +9,6 @@
     "build:svite": "svite build"
   },
   "devDependencies": {
-    "@carbon/themes": "^10.20.0",
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.0.1",
     "carbon-components": "^10.23.0",
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index bca03ac7..7a3274a0 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <style lang="scss" global>
+  @import "carbon-components/scss/globals/scss/_theme.scss";
+
   $feature-flags: (
     enable-css-custom-properties: true,
     grid-columns-16: true
   );
 
-  @import "@carbon/themes/scss/themes";
-
   :root {
     @include carbon--theme($carbon--theme--white, true);
   }
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index a14cf22d..d03ac2ea 100644
--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
@@ -791,7 +791,7 @@
           {
             "kind": "let",
             "value": "\"primary\"",
-            "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"",
+            "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
             "description": "Specify the kind of button"
           }
         ],
@@ -923,8 +923,8 @@
         [
           "click",
           {
-            "start": 3947,
-            "end": 3955,
+            "start": 3984,
+            "end": 3992,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -934,8 +934,8 @@
         [
           "mouseover",
           {
-            "start": 3962,
-            "end": 3974,
+            "start": 3999,
+            "end": 4011,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -945,8 +945,8 @@
         [
           "mouseenter",
           {
-            "start": 3981,
-            "end": 3994,
+            "start": 4018,
+            "end": 4031,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -956,8 +956,8 @@
         [
           "mouseleave",
           {
-            "start": 4001,
-            "end": 4014,
+            "start": 4038,
+            "end": 4051,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index bbbd6705..10229c14 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -28,6 +28,14 @@ description: High-level description
 
 <Button kind="danger">Danger button</Button>
 
+### Danger tertiary button
+
+<Button kind="danger-tertiary">Danger tertiary button</Button>
+
+### Danger ghost button
+
+<Button kind="danger-ghost">Danger ghost button</Button>
+
 ### Button with icon
 
 <Button icon={Add16}>With icon</Button>
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 3b8303df..39734839 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the kind of button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} [kind="primary"]
    */
   export let kind = "primary";
 
diff --git a/types/index.d.ts b/types/index.d.ts
index 48bb3cc8..09cd63ac 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -166,7 +166,14 @@ export class Button extends CarbonSvelteComponent {
      * Specify the kind of button
      * @default "primary"
      */
-    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
+    kind?:
+      | "primary"
+      | "secondary"
+      | "tertiary"
+      | "ghost"
+      | "danger"
+      | "danger-tertiary"
+      | "danger-ghost";
 
     /**
      * Specify the size of button