Button

Package: @synapse-ui/button Selector: synapse-button Status: Stable

A general-purpose accessible button with 5 semantic variants, 3 sizes, and a built-in loading state.

Overview

Button wraps the native <button> element with Synapse UI design tokens, enforces ARIA attributes, and exposes a signal-based API. All styles use --synapse-* CSS custom properties so the button adapts automatically when the active theme changes.

Installation

npm install @synapse-ui/button @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { Button } from '@synapse-ui/button';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Button],
  template: `
    <synapse-button variant="primary" (clicked)="onClick($event)"> Save changes </synapse-button>

    <synapse-button variant="danger" [loading]="saving"> Delete </synapse-button>
  `,
})
export class DemoComponent {
  saving = false;

  onClick(event: MouseEvent): void {
    console.log('clicked', event);
  }
}

API Reference

Inputs

Input	Type	Default	Description
variant	ButtonVariant	'primary'	Visual style — primary, secondary, ghost, danger, warning
size	ButtonSize	'md'	Button size — sm (32 px), md (40 px), lg (48 px)
disabled	boolean	false	Disables the button
loading	boolean	false	Shows a spinner and sets aria-busy; also disables clicks
type	'button' | 'submit' | 'reset'	'button'	Native button type
ariaLabel	string | undefined	undefined	Overrides accessible label for icon-only buttons

Outputs

Output	Payload	Description
clicked	MouseEvent	Emitted on click when not disabled or loading

Types

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning';
type ButtonSize = 'sm' | 'md' | 'lg';

Variants

<synapse-button variant="primary">Primary</synapse-button>
<synapse-button variant="secondary">Secondary</synapse-button>
<synapse-button variant="ghost">Ghost</synapse-button>
<synapse-button variant="danger">Danger</synapse-button>
<synapse-button variant="warning">Warning</synapse-button>

Sizes

<synapse-button size="sm">Small</synapse-button>
<synapse-button size="md">Medium</synapse-button>
<synapse-button size="lg">Large</synapse-button>

Loading State

While loading is true, the button renders a spinner, sets aria-busy="true", and ignores click events.

<synapse-button variant="primary" [loading]="isSaving"> Save </synapse-button>

Accessibility

• Uses a native <button> element — keyboard focusable by default.
• disabled sets the native disabled attribute.
• loading sets aria-busy="true" on the button.
• ariaLabel is forwarded to aria-label for icon-only use cases.
• Focus ring applied via :focus-visible using --synapse-focus-ring token.