Button Component

The Button component is part of the @teenageinterface Angular component library. It is a versatile button element with customizable properties for various use cases.

Installation

Ensure that you have installed the @teenageinterface/button library in your Angular project. If not, you can add it using:

npm install @teenageinterface/button

Usage

Import the Button component module into your Angular application:

import { CommonModule } from '@angular/common';
import { ButtonComponent } from "@teenageinterface/button";

@Component({
  selector: "pages-button",
  standalone: true,
  imports: [ButtonComponent],
  template: ` <tiButton>Button</tiButton> `,
})

export default class ButtonPage {}

Example

<tiButton
  [id]="'unique-button-id'"
  [disabled]="false"
  [loading]="true"
  [type]="'primary'"
>
  Click Me
</tiButton>

Properties

| Property | Type | Default | Description | |-----------|---------------------------------------------------------------------------------------|------------|-----------------------------------------------------------------------------| | id | string \| null | null | The unique identifier for the button element. | | disabled| boolean | false | Determines if the button is disabled. | | loading | boolean | false | Displays a loading spinner when set to true. | | type | 'default' \| 'primary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link' | 'default'| Specifies the button's style variant. |

Types

type

• default: Standard button with no special styling.
• primary: Emphasized button for primary actions.
• destructive: Button for destructive actions (e.g., delete).
• outline: Button with an outline style.
• ghost: Minimalist button without borders or background.
• link: Styled as a hyperlink.

Accessibility

• Ensure the id property is set for proper identification when integrating with forms or testing frameworks.
• Use disabled to indicate non-interactive buttons to users and assistive technologies.

Documentation

For more information, visit the official documentation.

Repository

The source code is available on GitHub.

License

This project is licensed under the MIT License.