diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
index f4d725a0..a574200b 100644
--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@@ -22,12 +22,26 @@
export let closeIcon = Close;
/**
- * Specify the text.
+ * Specify the text displayed next to the icon.
* Alternatively, use the named slot "text" (e.g., `
...
`)
* @type {string}
*/
export let text = undefined;
+ /**
+ * Specify an icon tooltip. The tooltip will not be displayed
+ * if either the `text` prop or a named slot="text" is used
+ * @type {string}
+ */
+ export let iconDescription = undefined;
+
+ /**
+ * Set the alignment of the tooltip relative to the icon.
+ * Only applies when `iconDescription` is provided
+ * @type {"start" | "center" | "end"}
+ */
+ export let tooltipAlignment = "center";
+
/** Obtain a reference to the button HTML element */
export let ref = null;
@@ -49,6 +63,17 @@
const dispatch = createEventDispatcher();
let refPanel = null;
+
+ $: hasIconOnly = iconDescription && !(text || $$slots.text);
+ $: buttonClass = [
+ hasIconOnly && "bx--btn bx--btn--primary",
+ hasIconOnly && "bx--tooltip__trigger bx--tooltip--a11y",
+ hasIconOnly && "bx--btn--icon-only bx--btn--icon-only--bottom",
+ hasIconOnly && `bx--tooltip--align-${tooltipAlignment}`,
+ $$restProps.class,
+ ]
+ .filter(Boolean)
+ .join(" ");
{
isOpen = !isOpen;
dispatch(isOpen ? "open" : "close");
}}
>
+ {#if hasIconOnly}
+ {iconDescription}
+ {/if}
{#if isOpen}