@flexzap/buttons

Flexible and reusable button components for Angular applications. Part of the FlexZap Library ecosystem.

Installation

npm install @flexzap/buttons

Peer Dependencies

This library requires the following peer dependencies:

npm install @angular/common@^21.0.0 @angular/core@^21.0.0

Usage

Basic Implementation

import { Component } from '@angular/core';
import { ZapButton } from '@flexzap/buttons';

@Component({
  imports: [ZapButton],
  template: `
    <zap-button (clicked)="handleClick()"> Click Me </zap-button>

    <zap-button [type]="'submit'" (clicked)="handleSubmit()"> Submit Form </zap-button>

    <zap-button [disabled]="isDisabled" (clicked)="handleClick()"> Disabled Button </zap-button>
  `
})
export class MyComponent {
  isDisabled = true;

  handleClick() {
    console.log('Button clicked!');
  }

  handleSubmit() {
    console.log('Form submitted!');
  }
}

API Reference

ZapButton Component

A flexible button component with customizable behavior and styling.

Inputs

| Property | Type | Default | Description | | ---------- | --------------------------------- | ---------- | ------------------------------ | | type | 'button' \| 'submit' \| 'reset' | 'button' | Sets the button type attribute | | disabled | boolean | false | Disables the button when true |

Outputs

| Event | Type | Description | | --------- | ------ | ---------------------------------- | | clicked | void | Emitted when the button is clicked |

Features

• OnPush Change Detection: Optimized performance with OnPush strategy
• SCSS Styling: Customizable styles with SCSS support
• Accessibility: Built-in accessibility features
• Standalone Component: No module imports required

Styling

The component uses SCSS for styling. You can customize the appearance by overriding the default styles:

zap-button {
  // Custom button styles
  --zap-button-color: #007bff;
  --zap-button-hover-color: #0056b3;
}

Testing

This library uses Jest for unit testing with zoneless Angular configuration.

Running Tests

# From the monorepo root
npm run buttons:test            # Run all unit tests with coverage
npm run buttons:test:watch      # Run tests in watch mode (no coverage)

Test Configuration

• Framework: Jest with jest-preset-angular
• Environment: jsdom
• Configuration: Zoneless Angular (mandatory)
• Coverage: Reports generated at coverage/flexzap/buttons/

Development

Building the Library

# From the monorepo root
npm run buttons:build       # Build with version bump
ng build @flexzap/buttons   # Build directly

Code Scaffolding

To generate new components within this library:

ng generate component [component-name] --project @flexzap/buttons

Publishing

Build for Publication

# From the monorepo root
npm run buttons:build

Publish to NPM

cd dist/flexzap/buttons
npm publish --access public

Contributing

This library is part of the FlexZap Library monorepo. Please refer to the main repository for contribution guidelines.

Development Guidelines

• Use standalone components (default behavior)
• Use input() and output() functions instead of decorators
• Set changeDetection: ChangeDetectionStrategy.OnPush
• Write comprehensive tests with Jest (zoneless configuration)
• Follow semantic versioning for releases

License

MIT License - see the LICENSE file for details.

Links

• Homepage: https://www.flexzap.dev
• Repository: https://github.com/vitorazevedo/flexzap-library
• Monorepo Documentation: Main README