@libs-ui/components-buttons-button

@libs-ui/components-buttons-button

Component Button đa năng với nhiều kiểu dáng, kích thước và tích hợp popover.

Giới thiệu

LibsUiComponentsButtonsButtonComponent là một standalone Angular component được thiết kế để hiển thị các nút bấm với nhiều kiểu dáng (primary, secondary, outline, danger...), kích thước (large, medium, small, smaller) và hỗ trợ tích hợp popover, spinner loading, icon trái/phải.

Tính năng

• ✅ Hỗ trợ nhiều kiểu button (primary, secondary, outline, danger, link...)
• ✅ 4 kích thước: large, medium, small, smaller
• ✅ Tích hợp popover (hover/click)
• ✅ Loading state với spinner
• ✅ Icon trái/phải hoặc icon-only mode
• ✅ Custom colors với buttonCustom
• ✅ Disable state
• ✅ Angular Signals cho tính phản hồi cao
• ✅ OnPush Change Detection tối ưu hiệu năng

Khi nào sử dụng

• Khi cần một nút bấm để kích hoạt hành động (submit form, mở dialog, navigate...)
• Khi cần hiển thị trạng thái loading trong khi xử lý async operation
• Khi cần button với popover tooltip hoặc menu dropdown
• Khi cần button với icon hoặc chỉ hiển thị icon
• Phù hợp cho các action buttons, form buttons, navigation buttons

Cài đặt

# npm
npm install @libs-ui/components-buttons-button

# yarn
yarn add @libs-ui/components-buttons-button

Import

import { LibsUiComponentsButtonsButtonComponent, TYPE_BUTTON, TYPE_SIZE_BUTTON } from '@libs-ui/components-buttons-button';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsButtonComponent],
  // ...
})
export class YourComponent {}

Ví dụ

Basic

<libs_ui-components-buttons-button
  label="Click me"
  (outClick)="handleClick($event)" />

With Icon

<libs_ui-components-buttons-button
  type="button-primary"
  label="Add Item"
  [classIconLeft]="'libs-ui-icon-add'"
  (outClick)="handleClick($event)" />

Different Types

<!-- Primary -->
<libs_ui-components-buttons-button
  type="button-primary"
  label="Primary" />

<!-- Secondary -->
<libs_ui-components-buttons-button
  type="button-secondary"
  label="Secondary" />

<!-- Danger -->
<libs_ui-components-buttons-button
  type="button-danger-high"
  label="Delete" />

<!-- Link style -->
<libs_ui-components-buttons-button
  type="button-link-primary"
  label="Learn more" />

Different Sizes

<libs_ui-components-buttons-button
  [sizeButton]="'large'"
  label="Large Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'medium'"
  label="Medium Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'small'"
  label="Small Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'smaller'"
  label="Smaller Button" />

Loading State

<libs_ui-components-buttons-button
  label="Save"
  [isPending]="isLoading"
  (outClick)="handleSave($event)" />

Icon Only

<libs_ui-components-buttons-button
  [classIconLeft]="'libs-ui-icon-settings'"
  [iconOnlyType]="true"
  (outClick)="openSettings($event)" />

With Popover

<libs_ui-components-buttons-button
  label="Hover me"
  [popover]="{
    type: 'text',
    mode: 'hover',
    config: {
      content: 'This is a tooltip',
      width: 200
    }
  }" />

Custom Color

<libs_ui-components-buttons-button
  type="button-custom"
  label="Custom"
  [buttonCustom]="{
    rootColor: '#ff6b6b',
    configStepColor: {
      background: 500,
      color: -500,
      background_hover: 600
    }
  }" />

API

libs_ui-components-buttons-button

Inputs

Property	Type	Default	Description
[buttonCustom]	IColorButton	undefined	Cấu hình màu custom (bắt buộc khi type là button-custom)
[classIconLeft]	string	''	Class của icon bên trái
[classIconRight]	string	''	Class của icon bên phải
[classInclude]	string	''	Class CSS bổ sung cho button
[classLabel]	string	''	Class CSS cho label
[disable]	boolean	false	Disable button
[flagMouse]	IFlagMouse	{isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false}	Trạng thái con trỏ chuột cho popover
[iconOnlyType]	boolean	false	Chỉ hiển thị icon, ẩn label
[ignoreFocusWhenInputTab]	boolean	undefined	Bỏ qua focus khi bấm TAB
[ignorePointerEvent]	boolean	undefined	Bỏ qua pointer events
[ignoreSetClickWhenShowPopover]	boolean	undefined	Không set click state khi show popover
[ignoreStopPropagationEvent]	boolean	true	Cho phép event propagation
[imageLeft]	{src: string, classInclude?: string}	undefined	Hình ảnh bên trái button
[isActive]	boolean	undefined	Trạng thái active của button
[isHandlerEnterDocumentClickButton]	boolean	undefined	Xử lý Enter key để click button
[isPending]	boolean	undefined	Hiển thị spinner loading
[label]	string	' '	Label của button
[popover]	IPopover	{}	Cấu hình popover
[sizeButton]	TYPE_SIZE_BUTTON	'medium'	Kích thước button: large, medium, small, smaller
[styleButton]	Record<string, any>	undefined	Inline styles cho button
[styleIconLeft]	Record<string, any>	undefined	Inline styles cho icon trái
[type]	TYPE_BUTTON	'button-primary'	Kiểu button (màu sắc, style)
[widthLabelPopover]	number	undefined	Chiều rộng popover của label
[zIndex]	number	10	Z-index của popover

Outputs

Property	Type	Description
(outClick)	Event	Emit khi button được click
(outFunctionsControl)	IPopoverFunctionControlEvent	Emit functions để điều khiển popover
(outPopoverEvent)	TYPE_POPOVER_EVENT	Emit events từ popover

Public Methods

Method	Description
FunctionsControl	Getter để lấy popover control functions

Types & Interfaces

/**
 * Các kiểu button có sẵn
 */
export type TYPE_BUTTON =
  | 'button-primary'
  | 'button-primary-revert'
  | 'button-secondary'
  | 'button-secondary-red'
  | 'button-outline-secondary'
  | 'button-third'
  | 'button-outline'
  | 'button-danger-high'
  | 'button-outline-hover-danger'
  | 'button-third-hover-danger'
  | 'button-danger-low'
  | 'button-green'
  | 'button-violet'
  | 'button-secondary-green'
  | 'button-outline-green'
  | 'button-custom'
  | 'button-link-primary'
  | 'button-link-third'
  | 'button-link-danger-high'
  | 'button-link-danger-low'
  | 'button-link-green'
  | 'button-link-violet'
  | 'button-link-custom'
  | string;

/**
 * Kích thước button
 */
export type TYPE_SIZE_BUTTON = 'large' | 'medium' | 'small' | 'smaller';

/**
 * Interface cho button config
 */
export interface IButton {
  key?: string;
  type?: TYPE_BUTTON;
  sizeButton?: TYPE_SIZE_BUTTON;
  iconOnlyType?: boolean;
  label?: string;
  disable?: boolean;
  classInclude?: string;
  classIconLeft?: string;
  classIconRight?: string;
  classLabel?: string;
  popover?: IPopover;
  ignoreStopPropagationEvent?: boolean;
  zIndex?: number;
  isPending?: boolean;
  action?: (data?: any) => Promise<void>;
  styleIconLeft?: Record<string, any>;
  styleButton?: Record<string, any>;
  buttonCustom?: IColorButton;
}

/**
 * Trạng thái chuột cho popover
 */
export interface IFlagMouse {
  isMouseEnter: boolean;
  isMouseEnterContent: boolean;
  isContainerHasScroll?: boolean;
}

Công nghệ

Technology	Version	Purpose
Angular	18+	Framework
Angular Signals	-	State management
TailwindCSS	3.x	Styling
OnPush	-	Change Detection

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/buttons/button

Unit Tests

# Chạy tests
npx nx test components-buttons-button

# Coverage
npx nx test components-buttons-button --coverage

# Watch mode
npx nx test components-buttons-button --watch

License

MIT