버튼
Betelgeuse 의 버튼은 네오브루탈 액션 컨트롤이다. 두꺼운 검은 테두리, 하드 섀도, 과감한 포인트 컬러, 눌리는 듯한 이동감을 통해 조용한 SaaS UI와 다른 물성을 만든다.
상태
default
primary
ghost
danger
disabled
네오브루탈 톤을 유지하기 위해 모든 variant 가 border-2와 하드 섀도를 공유한다.
활용 방법
아이콘
아이콘은 라벨 앞에 직접 전달한다. 색은 currentColor 를 따르게 두는 것이 가장 안정적이다.
Preview
tsx
<Button icon={<Rocket size={16} />}>Deploy</Button><Button variant="danger" icon={<Trash2 size={16} />}>Destroy</Button>
크기
sm 은 밀도 높은 툴바, md 는 기본, lg 는 랜딩/히어로 액션에 쓴다.
Preview
tsx
<Button size="sm">Small</Button><Button size="md">Medium</Button><Button size="lg">Large</Button>
링크
href 를 주면 a 태그로 렌더링한다. disabled 링크는 button 으로 강등된다.
Preview
tsx
<Button href="/betelgeuse">Back to system</Button>
스타일 원칙
- · 둥근 알약형보다 각진 형태를 우선한다.
- · 그림자는 blur 없이 단단한 오프셋으로 만든다.
- · hover 는 미묘한 색 변화보다 물리적 이동감으로 표현한다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "default" | "primary" | "ghost" | "danger" | "default" | 시각 강조 단계 |
| size | "sm" | "md" | "lg" | "md" | 버튼 크기 |
| icon | ReactNode | - | 선두 아이콘 |
| href | string | - | 있으면 a 태그로 렌더 |
| disabled | boolean | false | 비활성 |
| className | string | - | 롱테일 스타일 조절 |