lumir-design-system-01/dist/types/components/compounds/Button/Button.d.ts

Lumir Design System 01 - Professional & Clean

import React from 'react';
import { IconName } from 'lumir-design-system-shared';
export interface ButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
    /**
     * 버튼의 스타일 변형을 지정합니다.
     */
    variant?: 'filled' | 'outlined' | 'transparent';
    /**
     * 버튼의 종류를 지정합니다.
     */
    buttonType?: 'text-icon' | 'text-only' | 'icon-only';
    /**
     * 버튼의 색상 테마를 지정합니다.
     */
    colorScheme?: 'primary' | 'secondary' | 'cta';
    /**
     * 버튼의 크기를 지정합니다.
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * 버튼의 전체 너비 여부를 지정합니다.
     */
    isFullWidth?: boolean;
    /**
     * full width일 때 텍스트 정렬 방식을 지정합니다. (isFullWidth=true일 때만 적용)
     */
    textAlign?: 'left' | 'center' | 'right';
    /**
     * 버튼의 로딩 상태를 지정합니다.
     */
    isLoading?: boolean;
    /**
     * 버튼의 선택 상태를 지정합니다.
     */
    isSelected?: boolean;
    /**
     * 버튼의 왼쪽에 표시될 아이콘 이름을 지정합니다.
     */
    leftIcon?: IconName;
    /**
     * 버튼의 오른쪽에 표시될 아이콘 이름을 지정합니다.
     */
    rightIcon?: IconName;
    /**
     * 비활성화 상태를 지정합니다.
     */
    disabled?: boolean;
    /**
     * 클릭 이벤트 핸들러
     */
    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
    /**
     * 버튼의 내용물을 지정합니다.
     */
    children?: React.ReactNode;
}
/**
 * Button 컴포넌트는 사용자 상호작용을 위한 기본적인 요소입니다.
 * Lumir Design System의 스타일링을 따르며, 시맨틱 토큰을 사용하여 일관된 디자인을 제공합니다.
 */
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLDivElement>>;