캡슐형 버튼으로, 사용자가 할 다음 행동을 담습니다.

## 언제 쓰나
- `primary`(강조색 `accent` 채움. 2.0 전에는 ink 채움): 화면의 핵심 행동 하나. 한 화면에 두 개 이상 두지 않습니다. 핵심 버튼에는 `variant="primary"`를 명시합니다. 개발 중에는 `auditCrema()`가 화면의 primary 개수를 세어 알려 줍니다.
- `accent`: 2.0부터 `primary`의 별칭입니다(같은 클래스 `bl-btn-primary`). 전에는 ink 채움 버튼과 강조색 버튼이 따로 있었지만, 블랙 팔레트에서 둘이 같은 검정이었고 규칙상 나란히 두지도 않으므로 하나로 합쳤습니다.
- `crema`: 이미지나 색 면 위에 떠 있어야 할 때. 단색 paper 위에서는 쓰지 않습니다.
- `ghost`(기본값): 보조 행동(취소, 나중에, 더 보기). `variant`를 생략하면 ghost가 됩니다.
- `danger`: 삭제·신고·탈퇴. 라벨에 동작을 그대로 씁니다("삭제하기").

## 소비자가 넣는 것
- `ref`: 버튼 요소(`href`면 `<a>`)에 닿습니다(2.0).
- `children`: 라벨. "저장하기", "확인"처럼 짧은 동사형.
- `variant`, `size`(`lg` 52px / `md` 40px), `block`, `icon`, `href`(링크. 이때는 `target`·`rel` 같은 링크 속성도 받습니다), 그 밖의 button 속성.

## 하지 말 것
- 라벨에 이모지나 느낌표를 넣지 않습니다. 색을 임의 hex로 바꾸지 않습니다.

<!-- props:start — node scripts/docs.mjs가 dist/index.d.ts에서 만듭니다. 손으로 고치지 마세요 -->
## Props (React)

캡슐형 버튼. primary는 화면당 하나. href를 주면 <a>로 렌더링되고 target·rel 같은 링크 속성을 받습니다.

| 이름 | 형 | | 설명 |
| --- | --- | --- | --- |
| | `| (ButtonOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & { href?: undefined; target?: never; rel?: never; download?: never }) | (ButtonOw…` | | 자세한 형은 dist/index.d.ts |

Svelte는 같은 이름에 소문자 이벤트(`onchange`·`onclick`)와 `bind:`를 씁니다.
<!-- props:end -->