diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index e9d1d4d3..2b93f979 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -336,13 +336,13 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
+| hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant |
| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button |
| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button |
-| hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant |
| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon |
-| tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon `hasIconOnly` must be set to `true` |
-| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon |
+| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon `hasIconOnly` must be set to `true` |
+| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
| as | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
| disabled | let | No | boolean | false | Set to `true` to disable the button |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 5b7763a0..b26e021e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -547,7 +547,7 @@
"value": "false",
"isFunction": false,
"constant": false,
- "reactive": false
+ "reactive": true
},
{
"name": "icon",
@@ -572,6 +572,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
"type": "\"start\" | \"center\" | \"end\"",
+ "value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@@ -581,6 +582,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+ "value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 0c5036b6..64c05e2d 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -31,7 +31,9 @@
### Danger tertiary, icon-only button
-
+**Note:** you must provide an `iconDescription` for the button tooltip.
+
+
### Danger ghost button
@@ -43,13 +45,15 @@
### Icon-only button
-Set `hasIconOnly` to `true` to use the icon-only button variant.
-
**Note:** you must provide an `iconDescription` for the button tooltip.
-The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
+
-
+### Icon-only button (custom tooltip position)
+
+The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
+
+
### Link button
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index af6ca5b8..a436f4bf 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -17,7 +17,10 @@
*/
export let size = "default";
- /** Set to `true` for the icon-only variant */
+ /**
+ * Set to `true` for the icon-only variant
+ * @deprecated inferred using the $$slots API
+ */
export let hasIconOnly = false;
/**
@@ -37,13 +40,13 @@
* `hasIconOnly` must be set to `true`
* @type {"start" | "center" | "end"}
*/
- export let tooltipAlignment = undefined;
+ export let tooltipAlignment = "center";
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"}
*/
- export let tooltipPosition = undefined;
+ export let tooltipPosition = "bottom";
/**
* Set to `true` to render a custom HTML element
diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts
index dec19519..5aa6fc4c 100644
--- a/types/Button/Button.d.ts
+++ b/types/Button/Button.d.ts
@@ -37,11 +37,13 @@ export interface ButtonProps
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
+ * @default "center"
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
+ * @default "bottom"
*/
tooltipPosition?: "top" | "right" | "bottom" | "left";