Svelte · Workspace

ShellIconButton

Icon-only button used by the layout-editing chrome: a labelled `<button>` with the label as tooltip, `aria-pressed` for toggles, and a 2rem hit area (the same visual language as a nav row's `action`).

Public export

typescript

import { ShellIconButton } from '@happyvertical/smrt-svelte/workspace';

Import path: @happyvertical/smrt-svelte/workspace
Props: 6
Props described: 6 of 6
Bindable state: 0
Callback events: 0
Verified release: 0.57.40

Props

Also accepts Omit<HTMLButtonAttributes, 'aria-label' | 'title' | 'children'>. The table lists the component-specific contract.

NameTypeRequiredDescription

labelstringYesAccessible name and tooltip.

iconShellIconNameNoWhich filled icon to draw (omit when passing `children`).

childrenSnippetNoCustom icon content, drawn instead of `icon` (decorative).

pressedbooleanNoToggle state; omit for a plain action button.

tooltipstringNoTooltip text when it should differ from the label (default: the label).

sizenumberNoIcon edge length in pixels (default 18).

Bindable state

This component has no bindable public state.

Callback events

This component declares no callback event props.

Public export

Props

Bindable state

Callback events

Examples and explanation