Skip to Content
ComponentsFoundationButton

Button

사용자 동작을 트리거하는 버튼 컴포넌트

개요

Button 컴포넌트는 클릭하여 동작을 수행하는 인터랙티브 요소입니다. 다양한 스타일과 크기를 지원하며, 아이콘과 함께 사용할 수 있습니다.

주요 특징

  • ✅ 다양한 Variants: default, secondary, destructive, outline, ghost, link, tertiary
  • ✅ 크기 옵션: xs, sm, md, lg, xl 및 icon 사이즈
  • ✅ 아이콘 지원: 아이콘 단독 또는 텍스트와 조합 사용
  • ✅ render prop: 다른 요소에 버튼 스타일을 적용하는 커스텀 렌더링
  • ✅ 접근성: ARIA 속성 지원
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

Button은 7가지 variant를 지원합니다.

Variant 설명

Variant설명사용 사례
default기본 스타일, Primary 색상주요 액션, CTA 버튼
secondary보조 스타일보조 액션, 취소
destructive경고/위험 스타일삭제, 위험한 동작
outline테두리만 있는 스타일미니멀 디자인, 부가 액션
ghost배경 없는 스타일툴바, 내비게이션
link링크 스타일인라인 링크, 텍스트 내 액션
tertiary3차 스타일보조 정보, 덜 중요한 액션

Sizes

Button은 5가지 텍스트 크기와 5가지 아이콘 크기를 지원합니다.

텍스트 크기

아이콘 크기

사용 예시

아이콘과 함께 사용

텍스트와 아이콘을 조합하여 의미를 강화할 수 있습니다.

로딩 상태

loading prop으로 비동기 작업 중 로딩 상태를 표시합니다. 로딩 중에는 자동으로 비활성화됩니다.

비활성화

render prop

render를 사용하면 버튼의 스타일을 유지하면서 렌더링되는 요소를 변경할 수 있습니다.

Home

Variant × Size 조합

모든 variant와 size 조합을 확인할 수 있습니다.

Default
Secondary
Destructive
Outline

API Reference

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "tertiary""default"버튼의 시각적 스타일
size"xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl""md"버튼의 크기
renderReact.ReactElement-커스텀 요소로 렌더링 (base-ui render prop)
disabledbooleanfalse버튼 비활성화 상태
type"button" | "submit" | "reset""button"HTML button type 속성
onClick() => void-클릭 이벤트 핸들러
classNamestring-추가 CSS 클래스
childrenReact.ReactNode-버튼 내용

기본 사용법

import { Button } from "@vortex/ui-foundation"
 
// 기본
<Button>Label</Button>
 
// Variant 지정
<Button variant="secondary">Secondary</Button>
 
// Size 지정
<Button size="sm">Small</Button>
 
// 조합
<Button variant="destructive" size="lg">Delete</Button>

접근성

ARIA 속성

// 아이콘 전용 버튼에 라벨 추가
<Button size="icon" aria-label="다음 페이지">
  <ChevronRight />
</Button>
 
// 로딩 상태 표시
<Button disabled aria-busy="true">
  <Loader2 className="animate-spin" /> 처리 중...
</Button>

권장 사항

  • ✅ 아이콘 전용 버튼에 aria-label 추가
  • ✅ 로딩 상태에서 disabled와 aria-busy 사용
  • ✅ 명확한 텍스트 라벨 사용
  • ❌ 아이콘만으로 의미 전달 지양

관련 컴포넌트

Button vs Badge

항목ButtonBadge
역할사용자 동작을 트리거하는 인터랙티브 요소상태/카테고리를 표시하는 시각적 표시기
클릭onClick, type="submit" 등 동작 수행기본적으로 클릭 동작 없음
disabled✅ 지원❌ 미지원
typebutton, submit, reset해당 없음
사용 사례CTA, 폼 제출, 액션 버튼태그, 상태 라벨, 알림 카운트
Last updated on
BadgeCard