diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a24ddfd7..3c857b7f 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | 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 |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon |
| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons |
| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
@@ -395,6 +395,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- |
+| icon | No | -- | -- |
### Events
@@ -1666,15 +1667,13 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| ref | No | let | Yes | -- | null | Obtain a reference to the HTML button element |
| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> |
+None.
### Events
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index dc16dc50..3b402acc 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -500,7 +500,7 @@
{
"name": "icon",
"kind": "let",
- "description": "Specify the icon to render",
+ "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., ``)",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -633,7 +633,8 @@
"name": "__default__",
"default": true,
"slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
- }
+ },
+ { "name": "icon", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
@@ -5103,7 +5104,6 @@
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the HTML button element",
- "type": "null | HTMLButtonElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -5113,17 +5113,14 @@
}
],
"moduleExports": [],
- "slots": [
- {
- "name": "__default__",
- "default": true,
- "fallback": "",
- "slot_props": "{}"
- }
- ],
- "events": [{ "type": "forwarded", "name": "click", "element": "button" }],
+ "slots": [],
+ "events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "button" }
+ "rest_props": { "type": "InlineComponent", "name": "Button" },
+ "extends": {
+ "interface": "ButtonProps",
+ "import": "\"../Button/Button.svelte\""
+ }
},
{
"moduleName": "HeaderNav",
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index 29a4c877..56d2023f 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -41,6 +41,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
/**
* Specify the icon to render
+ * Alternatively, use the named slot "icon" (e.g., ``)
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
@@ -132,5 +133,6 @@ export default class Button extends SvelteComponentTyped<
[key: string]: any;
};
};
+ icon: {};
}
> {}
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index 52809b22..e6f4eb66 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -18,13 +18,11 @@ export interface HeaderGlobalActionProps extends ButtonProps {
* Obtain a reference to the HTML button element
* @default null
*/
- ref?: null | HTMLButtonElement;
-
- [key: `data-${string}`]: any;
+ ref?: undefined;
}
export default class HeaderGlobalAction extends SvelteComponentTyped<
HeaderGlobalActionProps,
{ click: WindowEventMap["click"] },
- { default: {} }
+ {}
> {}