Actions and display

IconToggle

IconToggle — an icon-only toggle button for dense filter and view-switcher rows. The icon is the `children` snippet (any icon set); `label` is both the accessible name and the tooltip text. `pressed` is reflected with `aria-pressed`, so a row of them is a one-of-many (or a many) toggle group; the owner decides what pressing means (this component keeps no state). An optional `count` shows as a small badge and is part of the accessible name and tooltip. The hit area is at least 44px square.

Public export

typescript

import { IconToggle } from '@happyvertical/smrt-ui/ui';

Import path: @happyvertical/smrt-ui/ui
Props: 7
Props described: 7 of 7
Bindable state: 0
Callback events: 0
Verified release: 0.57.40

Props

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

NameTypeRequiredDescription

labelstringYesAccessible name and tooltip text (what the button does or filters).

pressedbooleanNoWhether the toggle is on (`aria-pressed`).

countnumberNoOptional count badge; included in the accessible name and tooltip.

tonestringNoA CSS colour (a token such as `var(--smrt-color-primary)` or a value) shown when the toggle is pressed.

childrenSnippetYesThe icon. Decorative: it is hidden from assistive technology.

tooltipPlacementTooltipPlacementNoWhere the tooltip opens.

classstringNoAdditional CSS class names.

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