Docs / Components
SenseButtonComponent
Primary action control from @artificialsenselabs/ui — composes sense-icon, sense-spinner, and sense-badge internally.
Live demo: run nx serve showcase and open /components/button (port 4202).
Overview
Category: Form / actions. Selector: sense-button. Import: import { SenseButtonComponent } from '@artificialsenselabs/ui';
<sense-button severity="primary" icon="search" [loading]="saving()" (clicked)="save()">
Save
</sense-button>API
Generated from libs/ui/src/lib/button/sense-button/sense-button.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
label | string | null | null | Visible label when not using projection alone. |
type | SenseButtonType | 'button' | Native button `type` attribute. |
variant | SenseSurfaceVariant | null | null | Preferred surface treatment (`filled`, `outlined`, `ghost`). Overrides `appearance` when set. |
appearancedeprecated | SenseButtonAppearance | 'solid' | Visual style — solid, outline, ghost, or link. Deprecated: Prefer `variant`. |
severity | SenseButtonSeverity | 'primary' | Semantic colour role. |
size | SenseButtonSize | 'md' | Button scale token. |
icon | SenseIconName | null | null | Optional leading/trailing icon glyph. |
iconPosition | SenseButtonIconPosition | 'left' | Icon placement when `icon` is set. |
iconOnly | boolean | false | Square icon-only layout — requires `ariaLabel`. |
loading | boolean | false | Shows spinner, sets `aria-busy`, and disables interaction. |
disabled | boolean | false | Disables the native button. |
fullWidth | boolean | false | Stretches to container width. |
pill | boolean | false | Pill border radius. |
badge | string | number | null | null | Overlay badge count via `sense-badge`. |
badgeColor | SenseBadgeSeverity | 'danger' | Badge colour passed to `sense-badge`. |
ariaLabel | string | null | null | Accessible name override for icon-only or custom labelling. |
loadingLabel | string | null | null | Accessible name while `loading` is true; falls back to i18n `button.loading`. |
pressed | boolean | undefined | undefined | Toggle/segmented state forwarded as `aria-pressed` on the native button. Leave unset on plain action buttons so the attribute is omitted. |
| Output | Type | Description |
|---|---|---|
clicked | MouseEvent | Emitted when the native button is clicked and not disabled/loading. |
Accessibility
- ARIA attributes live on the native
<button>, not the host. loadingsetsaria-busy="true"and disables interaction.iconOnlyrequiresariaLabel(i18n fallback:button.iconOnly).- Bind
pressedonly for toggle/segmented controls (e.g. tab groups).