# @libs-ui/components-buttons-button
> Component Button đa năng với nhiều kiểu dáng, kích thước, icon và tích hợp popover/spinner.
## Giới thiệu
`LibsUiComponentsButtonsButtonComponent` là một Angular Standalone Component được thiết kế để hiển thị nút bấm với đầy đủ tính năng: hỗ trợ 20+ kiểu màu sắc (primary, secondary, outline, danger, link...), 4 kích thước, loading spinner tích hợp, icon trái/phải, chế độ icon-only, custom color qua `buttonCustom`, và tích hợp Popover. Component sử dụng Angular Signals + `ChangeDetectionStrategy.OnPush` để tối ưu hiệu năng.
## Tính năng
- ✅ 20+ kiểu button: primary, secondary, third, outline, danger, green, violet, link và các biến thể
- ✅ 4 kích thước: `large`, `medium`, `small`, `smaller`
- ✅ Loading state với spinner tích hợp (`isPending`)
- ✅ Icon trái (`classIconLeft`), icon phải (`classIconRight`) hoặc icon-only (`iconOnlyType`)
- ✅ Hình ảnh bên trái (`imageLeft`)
- ✅ Custom color thông qua `buttonCustom` (khi `type = 'button-custom'` hoặc `'button-link-custom'`)
- ✅ Tích hợp Popover (hover/click) với đầy đủ control API
- ✅ Trạng thái disabled với ngăn pointer events tùy chọn
- ✅ Trạng thái active (`isActive`)
- ✅ Hỗ trợ Enter key trên document (`isHandlerEnterDocumentClickButton`)
- ✅ Angular Signals + `ChangeDetectionStrategy.OnPush`
- ✅ Standalone Component, không cần NgModule
## Khi nào sử dụng
- Khi cần nút bấm để kích hoạt hành động (submit form, mở dialog, điều hướng...)
- Khi cần hiển thị trạng thái loading trong lúc xử lý async operation
- Khi cần button với popover tooltip hoặc menu dropdown
- Khi cần button chỉ có icon, không có label
- Khi cần tùy chỉnh màu sắc button theo brand riêng của feature
## Cài đặt
```bash
npm install @libs-ui/components-buttons-button
```
## Import
```typescript
import {
LibsUiComponentsButtonsButtonComponent,
IButton,
TYPE_BUTTON,
TYPE_SIZE_BUTTON,
} from '@libs-ui/components-buttons-button';
@Component({
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
// ...
})
export class YourComponent {}
```
## Ví dụ sử dụng
### Basic — Nút bấm đơn giản
```html
```
```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
@Component({
selector: 'app-example',
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
templateUrl: './example.component.html',
})
export class ExampleComponent {
handlerSave(event: Event): void {
event.stopPropagation();
// xử lý lưu dữ liệu
}
}
```
### Button Types — Các kiểu màu sắc
```html
```
### Button Sizes — Các kích thước
```html
```
### Loading State — Trạng thái loading
```html
```
```typescript
import { Component, signal } from '@angular/core';
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
@Component({
selector: 'app-form',
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
templateUrl: './form.component.html',
})
export class FormComponent {
protected isSaving = signal(false);
handlerSave(event: Event): void {
event.stopPropagation();
this.isSaving.set(true);
// gọi API...
// sau khi xong: this.isSaving.set(false);
}
}
```
### With Icons — Button kèm icon
```html
```
### Disabled State — Trạng thái vô hiệu hóa
```html
```
### Custom Color — Màu tùy chỉnh
`buttonCustom` (kiểu `IColorButton`) **bắt buộc** khi `type="button-custom"` (nền đặc) hoặc `type="button-link-custom"` (dạng link — nền/viền trong suốt). `configStepColor` khai báo màu cho từng trạng thái: `text` / `text_hover` / `text_active` / `text_disable` (bắt buộc) và `background*` / `border*` (tùy chọn). Mỗi giá trị nhận `string` (mã màu, `'transparent'`) hoặc `number` (step màu suy ra từ `rootColor`).
```html
```
```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
import { IColorButton } from '@libs-ui/services-config-project';
@Component({
selector: 'app-example',
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
templateUrl: './example.component.html',
})
export class ExampleComponent {
// Nền đặc
protected readonly customPurple: IColorButton = {
rootColor: '#7C3AED',
configStepColor: {
text: '#ffffff', text_hover: '#ffffff', text_active: '#ffffff', text_disable: '#C4B5FD',
background: '#7C3AED', background_hover: '#6D28D9', background_active: '#5B21B6', background_disable: '#DDD6FE',
border: '#7C3AED', border_hover: '#6D28D9', border_active: '#5B21B6', border_disable: '#DDD6FE',
},
};
// Dạng link — nền/viền trong suốt, chỉ đổi màu chữ
protected readonly customTeal: IColorButton = {
rootColor: '#0D9488',
configStepColor: {
text: '#0D9488', text_hover: '#0F766E', text_active: '#115E59', text_disable: '#99F6E4',
background: 'transparent', background_hover: '#F0FDFA', background_active: '#CCFBF1', background_disable: 'transparent',
border: 'transparent', border_hover: 'transparent', border_active: 'transparent', border_disable: 'transparent',
},
};
handlerClick(event: Event): void {
event.stopPropagation();
}
}
```
### With Popover — Button kèm popover/tooltip
```html
```
```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
import { TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
@Component({
selector: 'app-example',
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
templateUrl: './example.component.html',
})
export class ExampleComponent {
handlerClick(event: Event): void {
event.stopPropagation();
}
handlerPopoverEvent(event: TYPE_POPOVER_EVENT): void {
event.stopPropagation?.();
// event: 'show' | 'hide' | 'click' | 'remove'
}
}
```
### Image Left — Button kèm hình ảnh
```html
```
### Active State — Trạng thái đang được chọn
```html
```
### Class Include — Thêm class tùy chỉnh
```html
```
### Enter Key Handler — Kích hoạt bằng phím Enter
```html
```
### ViewChild — Truy cập Popover Control
```typescript
import { Component, viewChild } from '@angular/core';
import {
LibsUiComponentsButtonsButtonComponent,
IPopoverFunctionControlEvent,
} from '@libs-ui/components-buttons-button';
@Component({
selector: 'app-example',
standalone: true,
imports: [LibsUiComponentsButtonsButtonComponent],
template: `
`,
})
export class ExampleComponent {
private readonly myBtn = viewChild('myBtn');
handlerClick(event: Event): void {
event.stopPropagation();
// truy cập popover control qua FunctionsControl getter
const control = this.myBtn()?.FunctionsControl;
control?.hide?.();
}
handlerFunctionsControl(control: IPopoverFunctionControlEvent): void {
// lưu control để điều khiển popover từ bên ngoài
}
}
```
## @Input()
| Input | Type | Default | Mô tả | Ví dụ |
|---|---|---|---|---|
| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom — bắt buộc khi `type` là `'button-custom'` hoặc `'button-link-custom'`. Xem ví dụ "Custom Color" phía trên. | `[buttonCustom]="customPurple"` |
| `[classIconLeft]` | `string` | `''` | Class CSS của icon hiển thị bên trái label | `[classIconLeft]="'libs-ui-icon-add'"` |
| `[classIconRight]` | `string` | `''` | Class CSS của icon hiển thị bên phải label | `[classIconRight]="'libs-ui-icon-arrow-right'"` |
| `[classInclude]` | `string` | `''` | Class CSS bổ sung gắn vào phần tử button | `classInclude="w-full"` |
| `[classLabel]` | `string` | `''` | Class CSS bổ sung cho phần tử label bên trong | `[classLabel]="'font-bold'"` |
| `[disable]` | `boolean` | `false` | Vô hiệu hóa button, ngăn click và áp dụng style disabled | `[disable]="isFormInvalid()"` |
| `[flagMouse]` | `IFlagMouse` | `{ isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }` | Trạng thái con trỏ chuột từ container cha để popover hoạt động đúng khi scroll | `[flagMouse]="flagMouse()"` |
| `[iconOnlyType]` | `boolean` | `false` | Chỉ hiển thị icon, ẩn hoàn toàn label | `[iconOnlyType]="true"` |
| `[ignoreFocusWhenInputTab]` | `boolean` | `undefined` | Đặt `tabindex="-1"` để button không nhận focus khi nhấn phím Tab | `[ignoreFocusWhenInputTab]="true"` |
| `[ignorePointerEvent]` | `boolean` | `undefined` | Khi `disable=true`, vẫn cho phép pointer events (hữu ích khi cần show tooltip khi disabled) | `[ignorePointerEvent]="true"` |
| `[ignoreSetClickWhenShowPopover]` | `boolean` | `undefined` | Không set trạng thái `isClick=true` khi popover mở | `[ignoreSetClickWhenShowPopover]="true"` |
| `[ignoreStopPropagationEvent]` | `boolean` | `true` | Khi `false`, gọi `event.stopPropagation()` bên trong handler click của button | `[ignoreStopPropagationEvent]="false"` |
| `[imageLeft]` | `{ src: string; classInclude?: string }` | `undefined` | Hiển thị hình ảnh bên trái label | `[imageLeft]="{ src: '/assets/google.svg', classInclude: 'mr-[8px]' }"` |
| `[isActive]` | `boolean` | `undefined` | Áp dụng trạng thái active lên button (thêm attribute `active`) | `[isActive]="isSelected()"` |
| `[isHandlerEnterDocumentClickButton]` | `boolean` | `undefined` | Lắng nghe sự kiện `keyup Enter` trên `document` và trigger click button | `[isHandlerEnterDocumentClickButton]="true"` |
| `[isPending]` | `boolean` | `undefined` | Hiển thị spinner loading, tạm thời chặn click khi đang pending | `[isPending]="isLoading()"` |
| `[label]` | `string` | `' '` | Nội dung text hiển thị trên button, hỗ trợ i18n key | `label="Lưu"` hoặc `label="i18n_save"` |
| `[popover]` | `IPopover` | `{}` | Cấu hình popover tích hợp (type, mode, config...) | `[popover]="{ type: 'text', mode: 'hover', config: { content: 'Tooltip' } }"` |
| `[sizeButton]` | `TYPE_SIZE_BUTTON` | `'medium'` | Kích thước button: `'large'`, `'medium'`, `'small'`, `'smaller'` | `[sizeButton]="'small'"` |
| `[styleButton]` | `Record` | `undefined` | Inline styles trực tiếp cho phần tử `