diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c9cb31c4..b8f77fa2 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 
 ### Props
 
-| Prop name        | Required | Kind             | Reactive | Type                                                                                                                                      | Default value          | Description                                                                                                                                                                                   |
-| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                       | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
-| kind             | No       | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
-| size             | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code>                                                              | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
-| expressive       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
-| isSelected       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
-| icon             | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                 | <code>undefined</code> | Specify the icon to render                                                                                                                                                                    |
-| iconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>undefined</code> | Specify the ARIA label for the button icon                                                                                                                                                    |
-| tooltipAlignment | No       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons                                                                                                 |
-| tooltipPosition  | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                           | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                                                                                                                          |
-| as               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to render a custom HTML element<br />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         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to display the skeleton state                                                                                                                                                   |
-| disabled         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to disable the button                                                                                                                                                           |
-| href             | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>undefined</code> | Set the `href` to use an anchor link                                                                                                                                                          |
-| tabindex         | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>"0"</code>       | Specify the tabindex                                                                                                                                                                          |
-| type             | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>"button"</code>  | Specify the `type` attribute for the button element                                                                                                                                           |
+| Prop name        | Required | Kind             | Reactive | Type                                                                                                                                        | Default value          | Description                                                                                                                                                                                   |
+| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                         | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
+| kind             | No       | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger--tertiary" &#124; "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
+| size             | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code>                                                                          | <code>"lg"</code>      | Specify the size of button                                                                                                                                                                    |
+| expressive       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
+| isSelected       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
+| icon             | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                   | <code>undefined</code> | Specify the icon to render                                                                                                                                                                    |
+| iconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                                                         | <code>undefined</code> | Specify the ARIA label for the button icon                                                                                                                                                    |
+| tooltipAlignment | No       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                           | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons                                                                                                 |
+| tooltipPosition  | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                             | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                                                                                                                          |
+| as               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to render a custom HTML element<br />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         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to display the skeleton state                                                                                                                                                   |
+| disabled         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to disable the button                                                                                                                                                           |
+| href             | No       | <code>let</code> | No       | <code>string</code>                                                                                                                         | <code>undefined</code> | Set the `href` to use an anchor link                                                                                                                                                          |
+| tabindex         | No       | <code>let</code> | No       | <code>string</code>                                                                                                                         | <code>"0"</code>       | Specify the tabindex                                                                                                                                                                          |
+| type             | No       | <code>let</code> | No       | <code>string</code>                                                                                                                         | <code>"button"</code>  | Specify the `type` attribute for the button element                                                                                                                                           |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 929972c8..a67570f3 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -453,7 +453,7 @@
           "name": "kind",
           "kind": "let",
           "description": "Specify the kind of button",
-          "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
+          "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
           "value": "\"primary\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -465,8 +465,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of button",
-          "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
-          "value": "\"default\"",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 4ddece95..a32ea09d 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -30,7 +30,7 @@
 
 ## Danger tertiary button
 
-<Button kind="danger-tertiary">Danger tertiary button</Button>
+<Button kind="danger--tertiary">Danger tertiary button</Button>
 
 ## Danger tertiary, icon-only button
 
@@ -40,11 +40,11 @@
   </div>
 </InlineNotification>
 
-<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
+<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
 
 ## Danger ghost button
 
-<Button kind="danger-ghost">Danger ghost button</Button>
+<Button kind="danger--ghost">Danger ghost button</Button>
 
 ## Button with icon
 
@@ -90,36 +90,36 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 ## Field size
 
-<Button size="field">Primary</Button>
-<Button size="field" kind="secondary">Secondary</Button>
-<Button size="field" kind="tertiary">Tertiary</Button>
-<Button size="field" kind="ghost">Ghost</Button>
-<Button size="field" kind="danger">Danger</Button>
+<Button size="md">Primary</Button>
+<Button size="md" kind="secondary">Secondary</Button>
+<Button size="md" kind="tertiary">Tertiary</Button>
+<Button size="md" kind="ghost">Ghost</Button>
+<Button size="md" kind="danger">Danger</Button>
 
 ## Small size
 
-<Button size="small">Primary</Button>
-<Button size="small" kind="secondary">Secondary</Button>
-<Button size="small" kind="tertiary">Tertiary</Button>
-<Button size="small" kind="ghost">Ghost</Button>
-<Button size="small" kind="danger">Danger</Button>
+<Button size="sm">Primary</Button>
+<Button size="sm" kind="secondary">Secondary</Button>
+<Button size="sm" kind="tertiary">Tertiary</Button>
+<Button size="sm" kind="ghost">Ghost</Button>
+<Button size="sm" kind="danger">Danger</Button>
 
 ## Large size
 
-<Button size="lg">Primary</Button>
-<Button size="lg" kind="secondary">Secondary</Button>
-<Button size="lg" kind="tertiary">Tertiary</Button>
-<Button size="lg" kind="ghost">Ghost</Button>
-<Button size="lg" kind="danger">Danger</Button>
-
-## Extra-large size
-
 <Button size="xl">Primary</Button>
 <Button size="xl" kind="secondary">Secondary</Button>
 <Button size="xl" kind="tertiary">Tertiary</Button>
 <Button size="xl" kind="ghost">Ghost</Button>
 <Button size="xl" kind="danger">Danger</Button>
 
+## Extra-large size
+
+<Button size="2xl">Primary</Button>
+<Button size="2xl" kind="secondary">Secondary</Button>
+<Button size="2xl" kind="tertiary">Tertiary</Button>
+<Button size="2xl" kind="ghost">Ghost</Button>
+<Button size="2xl" kind="danger">Danger</Button>
+
 ## Disabled state
 
 <Button disabled>Disabled button</Button>
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 37e054e9..178e631f 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -7,15 +7,15 @@
 
   /**
    * Specify the kind of button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
    */
   export let kind = "primary";
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small" | "lg" | "xl"}
+   * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
    */
-  export let size = "default";
+  export let size = "lg";
 
   /** Set to `true` to use Carbon's expressive typesetting */
   export let expressive = false;
@@ -101,12 +101,11 @@
         (size === "sm" && !expressive) ||
         (size === "small" && !expressive)) &&
         "bx--btn--sm",
-      (size === "field" && !expressive) ||
-        (size === "md" && !expressive && "bx--btn--md"),
-      size === "field" && "bx--btn--field",
+      ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
+        "bx--btn--md",
       size === "small" && "bx--btn--sm",
-      size === "lg" && "bx--btn--lg",
       size === "xl" && "bx--btn--xl",
+      size === "2xl" && "bx--btn--2xl",
       kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte
index 189de59c..3e1efe43 100644
--- a/tests/Button.test.svelte
+++ b/tests/Button.test.svelte
@@ -13,9 +13,9 @@
 
 <Button kind="danger">Danger button</Button>
 
-<Button kind="danger-tertiary">Danger tertiary button</Button>
+<Button kind="danger--tertiary">Danger tertiary button</Button>
 
-<Button kind="danger-ghost">Danger ghost button</Button>
+<Button kind="danger--ghost">Danger ghost button</Button>
 
 <Button icon="{Add}">With icon</Button>
 
@@ -32,30 +32,30 @@
   <p {...props}>Custom element</p>
 </Button>
 
-<Button size="field">Primary</Button>
+<Button size="md">Primary</Button>
 
-<Button size="field" kind="secondary">Secondary</Button>
+<Button size="md" kind="secondary">Secondary</Button>
 
-<Button size="field" kind="tertiary">Tertiary</Button>
+<Button size="md" kind="tertiary">Tertiary</Button>
 
-<Button size="field" kind="ghost">Ghost</Button>
+<Button size="md" kind="ghost">Ghost</Button>
 
-<Button size="field" kind="danger">Danger</Button>
+<Button size="md" kind="danger">Danger</Button>
 
-<Button size="small">Primary</Button>
+<Button size="sm">Primary</Button>
 
-<Button size="small" kind="secondary">Secondary</Button>
+<Button size="sm" kind="secondary">Secondary</Button>
 
-<Button size="small" kind="tertiary">Tertiary</Button>
+<Button size="sm" kind="tertiary">Tertiary</Button>
 
-<Button size="small" kind="ghost">Ghost</Button>
+<Button size="sm" kind="ghost">Ghost</Button>
 
-<Button size="small" kind="danger">Danger</Button>
+<Button size="sm" kind="danger">Danger</Button>
 
 <Button disabled>Disabled button</Button>
 
 <Button skeleton />
 
-<Button skeleton size="field" />
+<Button skeleton size="md" />
 
-<Button skeleton size="small" />
+<Button skeleton size="sm" />
diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte
index 4189e7b0..cbdc5821 100644
--- a/tests/Tooltip.test.svelte
+++ b/tests/Tooltip.test.svelte
@@ -33,13 +33,13 @@
   <p>Resources are provisioned based on your account's organization.</p>
   <div class="bx--tooltip__footer">
     <Link href="/">Learn more</Link>
-    <Button size="small">Manage</Button>
+    <Button size="sm">Manage</Button>
   </div>
 </Tooltip>
 
 <Link href="/">Learn more</Link>
 
-<Button size="small">Manage</Button>
+<Button size="sm">Manage</Button>
 
 <Tooltip triggerText="Resource list" icon="{Catalog}">
   <p>Resources are provisioned based on your account's organization.</p>
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index ced3d8a1..05a1d440 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -18,14 +18,14 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
     | "tertiary"
     | "ghost"
     | "danger"
-    | "danger-tertiary"
-    | "danger-ghost";
+    | "danger--tertiary"
+    | "danger--ghost";
 
   /**
    * Specify the size of button
-   * @default "default"
+   * @default "lg"
    */
-  size?: "default" | "field" | "small" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
 
   /**
    * Set to `true` to use Carbon's expressive typesetting