diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d48cee4d77..7a5656ca41 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 | HTMLButtonElement
| 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 89844c689f..9680d6ba9b 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,7 @@
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the HTML button element",
- "type": "null | HTMLButtonElement",
+ "type": "HTMLButtonElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -5113,17 +5114,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/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 3b6d5029e1..d02ce83c79 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -2,11 +2,7 @@
import {
Header,
HeaderUtilities,
- HeaderAction,
HeaderGlobalAction,
- HeaderPanelLinks,
- HeaderPanelDivider,
- HeaderPanelLink,
SideNav,
SideNavItems,
SideNavMenu,
@@ -18,12 +14,11 @@
Row,
Column,
} from "carbon-components-svelte";
+ import Logout from "carbon-icons-svelte/lib/Logout.svelte";
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false;
- let isOpen1 = false;
- let isOpen2 = false;
@@ -31,37 +26,20 @@
-
-
+
-
- Switcher subject 1
- Switcher item 1
- Switcher item 2
- Switcher item 3
- Switcher item 4
- Switcher subject 2
- Switcher item 1
- Switcher item 2
- Switcher subject 3
- Switcher item 1
-
-
-
-
- Switcher subject 1
- Switcher item 1
- Switcher subject 2
- Switcher item 1
- Switcher item 2
- Switcher item 3
- Switcher item 4
- Switcher item 5
-
-
+ />
+
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 400e68d06d..1a45236caa 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -27,6 +27,8 @@
/**
* Specify the icon to render
+ * Alternatively, use the named slot "icon" (e.g., ``)
+ *
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
@@ -85,7 +87,12 @@
$: if (ctx && ref) {
ctx.declareRef(ref);
}
- $: hasIconOnly = icon && !$$slots.default;
+ $: hasIconOnly = (icon || $$slots.icon) && !$$slots.default;
+ $: iconProps = {
+ "aria-hidden": "true",
+ class: "bx--btn__icon",
+ "aria-label": iconDescription,
+ };
$: buttonProps = {
type: href && !disabled ? undefined : type,
tabindex,
@@ -158,12 +165,20 @@
{#if hasIconOnly}
{iconDescription}
{/if}
-
+
+ {#if $$slots.icon}
+
+ {:else if icon}
+
+ {/if}
{:else}
{/if}
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index e4ba1742ff..13e220ee07 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -1,4 +1,8 @@
-
+
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index 755b2fc58a..54d239fbee 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/tests/HeaderUtilities.test.svelte
@@ -30,7 +30,7 @@
-
+
`)
* @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 97e0d0ff4b..36923a55bb 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -1,9 +1,7 @@
import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
+import type { ButtonProps } from "../Button/Button.svelte";
-type RestProps = SvelteHTMLElements["button"];
-
-export interface HeaderGlobalActionProps extends RestProps {
+export interface HeaderGlobalActionProps extends ButtonProps {
/**
* Set to `true` to use the active variant
* @default false
@@ -20,13 +18,11 @@ export interface HeaderGlobalActionProps extends RestProps {
* Obtain a reference to the HTML button element
* @default null
*/
- ref?: null | HTMLButtonElement;
-
- [key: `data-${string}`]: any;
+ ref?: HTMLButtonElement;
}
export default class HeaderGlobalAction extends SvelteComponentTyped<
HeaderGlobalActionProps,
{ click: WindowEventMap["click"] },
- { default: {} }
+ {}
> {}