Button

Button 컴포넌트는 다양한 스타일과 크기의 버튼을 제공하며, 링크로도 사용할 수 있습니다. 현대적인 글래스 효과와 그라데이션을 제공합니다.

기본 사용법

Default Primary Success Warning Error Ghost

크기별 예시

Small

Medium

Large

아이콘과 함께 사용

📥

Download

✅

Install

⚠️

Delete

✨

Special

링크 버튼

🔗

GitHub 방문

📚

시작하기 가이드

📦

npm에서 보기

Props

Prop	Type	Default	Description
variant	'default' | 'primary' | 'success' | 'warning' | 'error' | 'ghost' | 'gradient'	'default'	버튼의 스타일
size	'sm' | 'md' | 'lg'	'md'	버튼의 크기
icon	string	-	아이콘 (선택사항)
href	string	-	링크 URL (선택사항)
target	string	-	링크 타겟 (선택사항)
disabled	boolean	false	비활성화 여부

사용 예시

기본 버튼

<Button variant="primary">클릭하세요</Button>

크기 조절

<Button variant="success" size="sm">
  Small
</Button>
<Button variant="success" size="md">
  Medium
</Button>
<Button variant="success" size="lg">
  Large
</Button>

아이콘과 함께

<Button variant="primary" icon="📥">
  다운로드
</Button>

링크 버튼

<Button variant="primary" href="/docs" icon="📚">
  문서 보기
</Button>

외부 링크

<Button variant="ghost" href="https://github.com" target="_blank">
  GitHub
</Button>

다양한 스타일의 링크 버튼

<Button variant="primary" href="/install" icon="📥">
  설치하기
</Button>

<Button variant="success" href="/docs" icon="📖">
  문서 읽기
</Button>

<Button variant="warning" href="/migrate" icon="🔄">
  마이그레이션
</Button>

<Button variant="gradient" href="/special" icon="✨">
  특별한 기능
</Button>

비활성화된 버튼

<Button variant="primary" disabled>
  비활성화됨
</Button>

특징

✨ 현대적인 디자인

• 글래스 효과: backdrop-filter: blur(15px) 적용
• 그라데이션 배경: 아름다운 그라데이션 효과
• 부드러운 그림자: 다층 그림자로 깊이감 표현
• 호버 애니메이션: translateY(-2px) 변환과 아이콘 스케일 효과

🎨 Variant별 특징

• Default: 기본 스타일, 라이트/다크 테마에 맞춤
• Primary: 주요 액션용, 파란색 그라데이션
• Success: 성공 액션용, 초록색 그라데이션
• Warning: 주의 액션용, 주황색 그라데이션
• Error: 위험 액션용, 빨간색 그라데이션
• Ghost: 투명 배경, 호버 시만 배경 표시
• Gradient: 특별한 그라데이션 배경 (새로운 기능)

🌙 다크 모드 지원

• 자동 색상 조정
• 일관된 사용자 경험
• 완벽한 테마 호환성

📱 반응형 디자인

• 모바일에서 최적화된 크기
• 터치 친화적 인터페이스
• 적응형 패딩과 폰트 크기

💫 애니메이션 효과

• 호버 효과: 마우스 오버 시 자연스러운 변환
• 아이콘 애니메이션: 호버 시 아이콘 스케일 효과
• 클릭 효과: 클릭 시 펄스 애니메이션
• 포커스 표시: 키보드 네비게이션 지원

♿ 접근성

• 키보드 네비게이션 지원
• 포커스 표시
• 스크린 리더 호환
• 비활성화 상태 지원

스타일링

Button 컴포넌트는 CSS 변수를 통해 커스터마이징할 수 있습니다:

:root {
  --page-button-border-radius: 12px;
  --page-button-padding: 12px 20px;
  --page-button-font-weight: 600;
}

브라우저 지원

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

모던 브라우저에서 최적의 성능을 제공합니다.