Button
액션 하나를 실행하는 컨트롤.
import { Button } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <> <Button>취향 이어보기</Button> <Button variant="accent">티켓 예매</Button> <Button variant="secondary">저장</Button> <Button variant="outline">공유</Button> <Button variant="ghost">읽기 →</Button> <Button variant="danger">탈퇴하기</Button> </> )}variant 는 여섯입니다. primary 는 ink 필, accent 는 주 행동 파랑, secondary 는 회색 면(저장 · 프로필),
outline 은 흰 배경 + 테두리, ghost 는 무테 텍스트 액션, danger 는 statusDanger 필입니다.
시안 v3 v3/Button 과는 이렇게 맞춥니다. Kind=primary 는 accent, Kind=secondary 는 secondary,
Kind=ink 는 primary 이고 셋 다 size="lg" 입니다. Kind=google 은 primary 에 leadingIcon 으로
G 마크를 넣은 것이라 variant 를 따로 두지 않습니다.
danger 는 색이 아니라 뜻으로 고릅니다. 되돌릴 수 없는 액션 — 탈퇴 · 영구 삭제 — 의
자리입니다. 눈에 띄게 하려고 고르는 것이 아니라 되돌릴 수 없음을 말하려고 고릅니다.
그래서 주 액션인 accent 와 나란히 서지 않습니다. 한 화면에 둘이 같이 필요하다면 둘 중
하나는 주 액션이 아닙니다.
크기와 아이콘
import { Button } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <> <Button size="sm">sm</Button> <Button size="md">md</Button> <Button size="cta" variant="accent"> cta </Button> <Button size="lg" variant="accent"> lg </Button> <Button variant="ghost" trailingIcon="→"> 읽기 </Button> </> )}size 는 넷입니다 — 더 늘리지 않습니다. lg 는 시안 v3 의 알약 48(굵게)입니다. 시안 컨트롤 높이는 다섯 종이지만 그대로 받으면
size 가 7종이 됩니다. 그건 추상화가 아니라 목록입니다. variant 를 늘리기 전에
이 축이 이 컴포넌트의 것인가 를 먼저 묻습니다.
모서리 · 앞 아이콘 · 비활성
import { Button } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <> <Button size="cta" variant="accent" shape="pill"> 내 동네로 정하기 </Button> <Button size="cta" variant="outline" shape="pill" leadingIcon="✓"> 내 동네 </Button> <Button size="cta" variant="accent" disabled> 잠김 </Button> </> )}shape="pill" 은 크기와 상관없이 알약 모서리입니다. 높이와 모서리는 따로 움직이므로 size 에
섞지 않습니다. leadingIcon 은 라벨 앞, trailingIcon 은 라벨 뒤 슬롯입니다.
disabled 는 모든 variant 에서 흐려지고(opacity: 0.4) hover 가 걸리지 않습니다. "이미 됐다"를
보여주는 자리에 disabled 를 쓰지 않습니다 — 저장됨 같은 상태는 흐리지 않고 선명하게 서야 합니다.
그 자리의 누름 가드는 소비처가 합니다. Button 은 aria-disabled 를 따로 읽지 않아서, 붙여도
클릭이 그대로 들어오고 hover 도 걸립니다. onClick 을 넘기지 않거나 핸들러 안에서 막습니다.
라우팅 CTA 는 asChild
버튼처럼 보이지만 실제로는 이동이면 <button> 이 아니라 <a> 여야 합니다.
asChild 는 자기 엘리먼트 대신 자식에 스타일을 입힙니다.
<Button variant="accent" size="cta" asChild>
<Link to="/this-weekend">이번 주말 보기</Link>
</Button>Props
Prop
Type
그 밖의 ButtonHTMLAttributes<HTMLButtonElement> 속성은 루트 엘리먼트로 그대로 통과한다.