@teenageinterface/button NPM

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.