SenseIconButton — ArtificialSense UI

Overview

Category: Action / primitives. Selector: sense-icon-button. Import: import { SenseIconButtonComponent } from '@artificialsenselabs/ui';

<sense-icon-button
  icon="search"
  ariaLabel="Search"
  variant="ghost"
/>

Generated from libs/ui/src/lib/icon-button/sense-icon-button/sense-icon-button.component.ts — run pnpm run docs:api to refresh.

Inputs
Input	Type	Default	Description
`icon`	`SenseIconName`	required	Semantic glyph rendered inside the button.
`size`	`SenseIconButtonSize`	`'md'`	Button scale — maps to matching `sense-icon` size.
`variant`	`SenseIconButtonVariant`	`'ghost'`	Surface treatment: filled, outlined, or ghost. Legacy `primary` / `secondary` accepted.
`color`	`SenseIconButtonColor \| null`	`null`	Optional semantic colour override for the icon and hover states.
`disabled`	`boolean`	`false`	Disables pointer interaction and dims the control.
`loading`	`boolean`	`false`	Shows spinner glyph, sets `aria-busy`, and disables interaction.
`ariaLabel`	`string`	required	Accessible name — required because there is no visible label text.

APG:Button pattern — icon-only buttons require ariaLabel.
Inner sense-icon is decorative; the native button carries the accessible name.
Loading swaps the label to i18n icon-button.loading and sets aria-busy="true".
Focus ring uses design-token outline; hover background on ghost variant.