diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d0dca240..cc852148 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -376,7 +376,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | let
| Yes | null | HTMLAnchorElement | HTMLButtonElement
| null
| Obtain a reference to the HTML element |
| kind | No | let
| No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"
| "primary"
| Specify the kind of button |
-| size | No | let
| No | "sm" | "md" | "lg" | "xl" | "2xl"
| "default"
| Specify the size of button |
+| size | No | let
| No | "sm" | "md" | "lg" | "xl" | "2xl"
| "lg"
| Specify the size of button |
| expressive | No | let
| No | boolean
| false
| Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | let
| No | boolean
| false
| Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | let
| No | typeof import("svelte").SvelteComponent
| undefined
| Specify the icon to render |
@@ -429,10 +429,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
-| href | No | let
| No | string
| undefined
| Set the `href` to use an anchor link |
-| size | No | let
| No | "default" | "field" | "small" | "lg" | "xl"
| "default"
| Specify the size of button skeleton |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | ------------------------------------ |
+| href | No | let
| No | string
| undefined
| Set the `href` to use an anchor link |
+| size | No | let
| No | "sm" | "md" | "lg" | "xl" | "2xl"
| "lg"
| Specify the size of button skeleton |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6b977b30..9bfbd49e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -466,7 +466,7 @@
"kind": "let",
"description": "Specify the size of button",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
- "value": "\"default\"",
+ "value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -704,8 +704,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
- "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 e6afd1a7..21039871 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -134,11 +134,11 @@ Use `buttonAttributes` to pass any additional attributes.
## Skeleton
-
+
+
+
+
+
## Programmatic focus
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 2a6cb065..bd9c13ae 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -15,7 +15,7 @@
* Specify the size of button
* @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;
@@ -97,10 +97,6 @@
class: [
"bx--btn",
expressive && "bx--btn--expressive",
- ((size === "small" && !expressive) ||
- (size === "sm" && !expressive) ||
- (size === "small" && !expressive)) &&
- "bx--btn--sm",
`bx--layout--size-${size}`,
`bx--btn--${kind}`,
disabled && "bx--btn--disabled",
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index ebdae2a8..11a0026e 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -7,9 +7,9 @@
/**
* Specify the size of button skeleton
- * @type {"default" | "field" | "small" | "lg" | "xl"}
+ * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
*/
- export let size = "default";
+ export let size = "lg";
@@ -20,10 +20,11 @@
role="button"
class:bx--skeleton="{true}"
class:bx--btn="{true}"
- class:bx--btn--field="{size === 'field'}"
- class:bx--btn--sm="{size === 'small'}"
- class:bx--btn--lg="{size === 'lg'}"
- class:bx--btn--xl="{size === 'xl'}"
+ class:bx--layout--size-sm="{size === 'sm'}"
+ class:bx--layout--size-md="{size === 'md'}"
+ class:bx--layout--size-lg="{size === 'lg'}"
+ class:bx--layout--size-xl="{size === 'xl'}"
+ class:bx--layout--size-2xl="{size === '2xl'}"
{...$$restProps}
on:click
on:focus
@@ -39,10 +40,11 @@