Button

Button 컴포넌트는 다양한 variant와 size 옵션을 통해 버튼의 스타일을 변경할 수 있는 React 컴포넌트입니다. Radix UI의 Slot 기능을 활용하여 구현되었습니다.

• 다양한 스타일 옵션을 제공합니다
• 접근성을 고려한 설계를 제공합니다
• 여러 크기 옵션을 지원합니다

Installation

이 컴포넌트를 사용하려면 아래 명령어를 통해 패키지를 설치합니다.

npx @jongh/cli add button

Usage

Button 컴포넌트는 다양한 variant와 size 옵션을 제공하여 버튼을 쉽게 스타일링할 수 있습니다.

Props

기본적인 HTML button 태그의 모든 속성을 지원하며, 추가로 다음 Props를 제공합니다:

• variant ("default" | "destructive" | "outline" | "secondary" | "ghost" | "link"): 버튼의 시각적 스타일을 설정합니다. 기본값: "default"
• size ("default" | "sm" | "lg" | "icon"): 버튼의 크기를 설정합니다. 기본값: "default"
• asChild (boolean): true일 경우, 버튼의 스타일을 자식 요소에 적용합니다. Radix UI의 Slot 패턴을 사용합니다. 기본값: false

Variant

variant prop은 버튼의 스타일을 설정합니다. 다음 옵션이 있습니다:

• default: 기본 스타일, 주요 작업을 위한 버튼입니다.
• destructive: 위험/경고를 나타내는 버튼입니다.
• outline: 테두리만 있는 버튼입니다.
• secondary: 보조 작업을 위한 버튼입니다.
• ghost: 배경색이 없는 버튼으로, 호버 시에만 배경이 표시됩니다.
• link: 링크 스타일 버튼으로, 텍스트와 같은 모양입니다.

Size

size prop은 버튼의 크기를 설정합니다:

• default: 기본 크기입니다.
• sm: 작은 크기로, 공간이 제한된 UI에 적합합니다.
• lg: 큰 크기로, 강조가 필요한 버튼에 적합합니다.
• icon: 아이콘 버튼으로, 너비와 높이가 동일합니다.

Accessibility

Button 컴포넌트는 기본적으로 HTML button 요소를 사용하여 키보드 접근성과 스크린 리더 호환성을 제공합니다.

• 기본적으로 키보드의 Enter 또는 Space 키로 활성화할 수 있습니다.
• 적절한 role="button"이 설정되어 있습니다.
• disabled 속성 사용 시 적절한 시각적/기능적 비활성화가 적용됩니다.

Example

기본 사용 예시

import { Button } from "@/components/button"

const ButtonExample = () => (
  <div>
    <Button variant="default">Primary Button</Button>
    <Button variant="destructive">Destructive Button</Button>
    <Button variant="outline">Outline Button</Button>
    <Button variant="secondary">Secondary Button</Button>
    <Button variant="ghost">Ghost Button</Button>
    <Button variant="link">Link Button</Button>
  </div>
)

다양한 크기 예시

import { Button } from "@/components/button"

const ButtonSizeExample = () => (
  <div>
    <Button size="default">Default Size</Button>
    <Button size="sm">Small Size</Button>
    <Button size="lg">Large Size</Button>
    <Button size="icon">Icon</Button>
  </div>
)

asChild 사용 예시

import { Button } from "@/components/button"
import { Link } from "react-router-dom"

const ButtonAsChildExample = () => (
  <Button asChild variant="link">
    <Link to="/dashboard">Dashboard로 이동</Link>
  </Button>
)

더 자세한 내용

Radix UI의 Slot 패턴에 대한 자세한 내용은 Radix UI Slot 공식 문서를 참조하세요.