Button

다양한 스타일과 크기를 지원하는 버튼 컴포넌트입니다. 사용자 인터랙션을 위한 기본적인 UI 요소로 사용됩니다. 라이트/다크 테마를 자동으로 지원합니다.

기본 사용법

import { Button } from 'react-common-components-library';

function ButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Button>기본 버튼</Button>
      <Button variant="primary">주요 버튼</Button>
      <Button variant="secondary">보조 버튼</Button>
      <Button variant="outline">외곽선 버튼</Button>
      <Button variant="ghost">고스트 버튼</Button>
      <Button variant="link">링크 버튼</Button>
    </div>
  );
}

크기 변형

Button 컴포넌트는 다양한 크기를 지원합니다:

import { Button } from 'react-common-components-library';

function ButtonSizesExample() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <Button size="xs">아주 작게</Button>
      <Button size="sm">작게</Button>
      <Button size="md">중간</Button>
      <Button size="lg">크게</Button>
      <Button size="xl">아주 크게</Button>
    </div>
  );
}

아이콘 버튼

버튼에 아이콘을 추가할 수 있습니다:

import { Button } from 'react-common-components-library';

function IconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {/* 아이콘만 있는 버튼 */}
      <Button variant="ghost" aria-label="추가">
        ➕
      </Button>
      
      {/* 왼쪽 아이콘 */}
      <Button leftIcon="❤️">
        좋아요
      </Button>
      
      {/* 오른쪽 아이콘 */}
      <Button rightIcon="➡️">
        다음
      </Button>
    </div>
  );
}

로딩 상태

버튼의 로딩 상태를 표시할 수 있습니다:

import { Button } from 'react-common-components-library';
import { useState } from 'react';

function LoadingButtonExample() {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleClick = () => {
    setIsLoading(true);
    // 3초 후 로딩 상태 해제
    setTimeout(() => setIsLoading(false), 3000);
  };
  
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Button isLoading>로딩 중...</Button>
      
      <Button 
        isLoading={isLoading} 
        onClick={handleClick}
        loadingText="처리 중..."
      >
        클릭하세요
      </Button>
    </div>
  );
}

비활성화 상태

버튼을 비활성화할 수 있습니다:

import { Button } from 'react-common-components-library';

function DisabledButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Button isDisabled>비활성화 버튼</Button>
      <Button variant="primary" isDisabled>비활성화 주요 버튼</Button>
      <Button variant="outline" isDisabled>비활성화 외곽선 버튼</Button>
    </div>
  );
}

버튼 그룹

여러 버튼을 그룹으로 묶을 수 있습니다:

import { ButtonGroup, Button } from 'react-common-components-library';

function ButtonGroupExample() {
  return (
    <ButtonGroup spacing="2">
      <Button variant="outline">저장</Button>
      <Button variant="outline">취소</Button>
      <Button variant="primary">제출</Button>
    </ButtonGroup>
  );
}

붙어있는 버튼 그룹

버튼을 서로 붙여서 표시할 수 있습니다:

import { ButtonGroup, Button } from 'react-common-components-library';

function AttachedButtonGroupExample() {
  return (
    <ButtonGroup isAttached>
      <Button variant="outline">이전</Button>
      <Button variant="outline">지금</Button>
      <Button variant="outline">다음</Button>
    </ButtonGroup>
  );
}

콜 투 액션 버튼

사용자에게 중요한 행동을 유도하는 강조된 버튼입니다:

import { Button } from 'react-common-components-library';

function CTAButtonExample() {
  return (
    <Button
      size="lg"
      colorScheme="green"
      variant="primary"
      isFullWidth
    >
      지금 구매하기
    </Button>
  );
}

API 참조

Button Props

속성	타입	기본값	설명
children	ReactNode	-	버튼 내용
variant	'solid' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'	'solid'	버튼 스타일 변형
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	버튼 크기
colorScheme	string	'blue'	버튼 색상 스키마
leftIcon	ReactElement	-	버튼 왼쪽에 표시할 아이콘
rightIcon	ReactElement	-	버튼 오른쪽에 표시할 아이콘
isLoading	boolean	false	로딩 상태 표시 여부
loadingText	string	-	로딩 중 표시할 텍스트
isDisabled	boolean	false	버튼 비활성화 여부
isFullWidth	boolean	false	부모 요소의 전체 너비를 차지할지 여부
type	'button' | 'submit' | 'reset'	'button'	버튼 타입
onClick	(event: MouseEvent) => void	-	클릭 이벤트 핸들러
className	string	''	컴포넌트에 적용할 추가 CSS 클래스
style	CSSProperties	-	컴포넌트에 적용할 인라인 스타일

ButtonGroup Props

속성	타입	기본값	설명
children	ReactElement<ButtonProps>[]	필수	Button 컴포넌트 목록
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-	그룹 내 모든 버튼의 크기
variant	'solid' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'	-	그룹 내 모든 버튼의 스타일 변형
colorScheme	string	-	그룹 내 모든 버튼의 색상 스키마
isAttached	boolean	false	버튼을 서로 붙일지 여부
isDisabled	boolean	false	그룹 내 모든 버튼의 비활성화 여부
spacing	number | string	'0'	버튼 간 간격 (isAttached가 false일 때만 적용)
className	string	''	컴포넌트에 적용할 추가 CSS 클래스
style	CSSProperties	-	컴포넌트에 적용할 인라인 스타일

접근성

Button 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:

• 기본적으로 <button> 요소를 사용하여 키보드 접근성을 보장합니다.
• 아이콘만 있는 버튼에는 aria-label 속성을 통해 스크린 리더 사용자에게 버튼의 목적을 설명해야 합니다.
• 로딩 상태일 때는 aria-busy="true"가 자동으로 적용됩니다.
• 비활성화 상태일 때는 aria-disabled="true"가 자동으로 적용됩니다.
• 링크 스타일의 버튼(variant="link")은 시각적으로는 링크처럼 보이지만 키보드 접근성은 버튼과 동일하게 유지됩니다.