Button

구조는 당근 SEED Action Button(Apache-2.0)을 따른다 — 크기 4 · 배치 2 · 변형 7 · 상태 6. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-09-30 사용자 결정).

수치 원본은 button.yaml 이다. 아래 수치 표는 사이트가 그 파일로 그리고, GitHub 에서는 표 자리가 그 파일로 가는 링크로 보인다. 그림 자리([그림: …])도 같다 — 사이트는 그 자리에 스펙 값으로 그린 버튼과 화면 예시를 둔다.

직접 골라 보기제목 링크 복사

변형 · 크기 · 배치 · 상태를 고르면 스펙대로 그린 버튼과 그 코드가 바뀐다. 버튼은 실제로 눌러 볼 수 있다(호버 · 누름 · Tab 포커스).

import { Button } from "@/components/ui/button"

<Button>저장</Button>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

네 가지다. 크기는 이름이 아니라 높이로 고른다.

• small(36) · medium(40) — 화면 안에서 두루 쓴다. 모달 footer 는 small.
• large(48) — CTA. 모바일 하단 고정 버튼 · 모바일 모달 footer.
• xsmall(32) — 좁은 자리에서 쓰는 알약 모양.

누르는 영역은 보이는 크기와 따로 가로 · 세로 44 까지 넓힌다(v106 — 44 는 반드시).

크기

글자와 함께 쓸 때(withText):

크기별 여백 · 글자 · 아이콘 — 글자

아이콘만 쓸 때(iconOnly):

크기별 여백 · 아이콘 — 아이콘만

모든 조합에 공통인 값:

공통

Layout제목 링크 복사

라벨과 아이콘의 조합이다 — 글자만 · 앞 아이콘 + 글자 · 글자 + 뒤 아이콘 · 아이콘만.

• 앞 · 뒤 아이콘을 함께 쓰지 않는다. 앞은 동작의 뜻을 돕고(추가의 +), 뒤는 동작을 돕는다(다음의 chevron).
• 아이콘은 꼭 필요할 때만 쓴다 — 라벨을 읽기 어려워진다.
• 아이콘만은 아이콘만으로 뜻을 전해 접근성이 떨어진다. 꼭 필요할 때만 쓰고, 이름(aria-label 또는 옆 Tooltip)을 반드시 단다. 정사각이고, 아이콘 버튼의 보이는 크기 기본은 medium(40 — v106).
• 상단 바의 아이콘 버튼은 이 Button 이 아니다 — Top Navigation 의 아이콘 버튼(상자 44 = 누르는 영역 · 아이콘 24 · 버튼끼리 붙음)이다(2026-10-04). 본문 안의 아이콘 버튼은 그대로 medium · iconOnly(40 · 18)다.

Variant제목 링크 복사

일곱 가지다. 화면에서 강조하려는 정도에 따라 고른다.

변형별 색

ghost 는 글자색을 바꿀 수 있다(SEED ghost 의 color) — 배경 · 누름은 그대로다.

ghost 글자색

State제목 링크 복사

변형별 상태 변화

로딩

• loading 이면 로딩 원(크기는 Size 표)을 라벨 자리 가운데 둔다. 라벨은 글자 · 아이콘 색만 투명하게 해서 버튼 폭이 그대로다 — 버튼이 자식을 따로 감싸지 않으므로 부르는 쪽의 [&>span] · [&>svg] 규칙이 그대로 먹는다.
• 로딩 중에는 누르기를 자동으로 막는다(두 번 제출 방지) — 포인터 · Enter · Space 누르기를 삼키고(onClick 을 부르지 않는다), 누름 축소도 없다. 포커스는 그대로 두고 aria-busy="true" 를 단다. SEED 는 로딩이 비활성을 포함하지 않지만 groo 는 막는다 — 사용자 결정.
• 로딩 원 색은 변형마다 다르다(Solid 는 흰 원, Brand Outline 은 옅은 브랜드 트랙 위 브랜드 선 색 stroke-brand-solid — Progress Circle brand 톤과 같고 다크에서는 밝은 짝, 나머지는 회색 트랙 위 본문색).

Width제목 링크 복사

• 내용 맞춤(기본) — 라벨 길이만큼.
• 채움 — 컨테이너 폭을 채운다(w-full). 모바일 하단 고정 CTA · 폼의 마지막 제출.
• 최소 너비는 두지 않는다. 둘을 나란히 채울 때는 비율로 나눈다(아래 배치).

Guidelines제목 링크 복사

Hierarchy제목 링크 복사

시각적 주목도는 배경 대비로 정해진다. 화면에서 강조하려는 정도에 따라 변형을 고른다.

상황에 따라 알맞은 변형 쓰기제목 링크 복사

화면 안의 중요도에 따라 고른다. 같은 저장이라도 그 화면의 CTA 면 neutralSolid, 서비스의 중심 동작이면 brandSolid 다.

브랜드 색은 꼭 필요한 곳에만제목 링크 복사

브랜드 색은 로고 · 대표 버튼 · 핵심 메시지 같은 브랜드 상징에 모아 쓴다. 많이 쓰면 뜻과 강조가 흩어진다.

• brandSolid 는 서비스의 중심 동작 하나에만 — Desk "거래 추가", HR "휴가 신청"처럼. 어떤 화면이 여기에 드는지는 앱 적용 때 화면마다 정한다.
• 저장 · 확인 · 다음 같은 대부분의 CTA 는 neutralSolid 다.

예외 — 증권 매매 단추제목 링크 복사

증권 종목 상세의 [매도] · [매수] 한 쌍만 국내 통념을 따른다 — [매도] brandSolid(파랑) · [매수] criticalSolid(빨강), large 한 줄에 반씩 · 사이 8. 국내 증권 앱 사용자가 매수 빨강 · 매도 파랑을 이미 익혀 있어 그 기대를 지킨다. 이 자리에서 criticalSolid 는 "되돌릴 수 없는 확정" 이 아니고 brandSolid 는 "서비스의 중심 동작" 이 아니다 — 이 한 쌍 밖으로 넓히지 않는다(2026-10-29 사용자 결정 C7 B — https://claude.ai/artifact/QLQiAkvfez7bqpc4DEuiCH). 거절: 매수 neutralSolid · 매도 neutralWeak(스펙 그대로).

버튼 조합제목 링크 복사

• Solid 조합 — neutralWeak + neutralSolid(또는 brandSolid). 위계가 분명하고 부담이 적다.
• Outline 조합 — neutralOutline + brandOutline. 강조가 낮은 보조 액션을 한 화면에 여러 번 둘 때.
• Outline 은 Solid 와 함께 쓰지 않는다.

버튼 배치제목 링크 복사

• 닫기 · 초기화처럼 Dismiss 뜻의 neutralWeak 와 CTA 를 나란히 채울 때는 3:7 로 나눈다 — 위계가 분명해진다. 모달 footer 는 Dialog · Bottom Sheet 의 폭 나누기(지금은 균등)를 따른다.
• 비슷한 위계의 neutralWeak 둘은 나란히 둘 수 있다.
• 셋 이상 나란히 두는 것은 피한다(SEED "세 개 이상 나란히 사용하는 것은 권장하지 않습니다") — 중요도가 비슷해 보여 고르기 어렵고, 큰 글자에서 라벨이 잘린다. 더 있으면 아이콘만 버튼(더보기)으로 넘긴다.
• 인접한 버튼 사이는 8(spacing-x2).

놓는 바탕 — neutralWeak 의 채움과 비활성 채움(bg-disabled)은 라이트에서 회색 바닥(bg-layer-basement)과 같은 색(gray-200)이다(v108). 흰 표면(카드 · 흰 띠 · 흰 화면 · 시트 · 모달 — bg-layer-default · bg-layer-floating) 위에 두고, 회색 바닥에 바로 둘 땐 neutralOutline 을 쓴다 — 바닥 위의 neutralWeak 는 채움이 사라져 글자만 남는다(1.00:1). 데스크톱 화면 제목 줄의 버튼이 그 자리다. 기초 규칙은 DESIGN.md Elevation 의 "바닥 위의 채움"(2026-10-16 사용자 결정 — 기초 웹 01-040 B)이다.

모달 footer(groo)

• 오른쪽에 [취소 neutralWeak] [저장 neutralSolid] — 웹은 small(36), 모바일 전체 폭은 large(48).
• 확인 창을 여는 삭제는 왼쪽에 ghost + critical 글자. 삭제의 확정은 Alert Dialog 의 criticalSolid.
• 1280 미만 Bottom Sheet 바닥도 같은 꼴이다 — [삭제] 는 왼쪽 ghost + critical(large · 글자만큼의 폭), 주 버튼([저장] · [수정])이 남은 폭을 채운다.
• 목록 줄을 눌러 들어간 화면(상세 · 수정)에서 동작이 삭제 하나뿐이면 이 바닥 왼쪽 [삭제] 로 둔다 — 머리 ⋮ 는 동작이 여럿일 때다(Menu 의 "줄의 동작", 2026-10-25 사용자 결정).
• 모달 footer 의 버튼을 neutralOutline 둘로 두지 않는다 — 전체 폭 버튼 둘이 테두리로 서면 위계가 흐려진다.

라벨제목 링크 복사

기초 Writing(v106)을 따른다 — 사용자가 할 행동을 동사로, 해요체 없이 짧게, 마침표 없이.

• "다음" 보다 "저장" · "주문 확인"처럼 무엇을 하는지 알게.
• 같은 동작에는 같은 말을 쓴다.

긴 라벨제목 링크 복사

긴 라벨 · 번역 · 큰 글자로 나란한 두 버튼이 넘치면 세로로 쌓는다(주 버튼이 위). 한 줄에 억지로 줄이지 않는다.

짝 버튼은 SEED ResponsivePair 를 따른다 — 어느 한 버튼의 라벨이 짝 폭의 절반을 넘으면 둘 다 세로로 쌓고, 라벨은 한 줄을 지킨다(버튼 안에서 줄을 바꾸지 않는다). 대가 — 글자 크기 200% 에서는 가장 긴 라벨이 한 줄을 지키느라 버튼 밖으로 넘칠 수 있다(약 170). 2026-10-17 사용자 결정 — 03A-013 A.

큰 글자에서 높이 — 크기마다의 높이(32 · 36 · 40 · 48)는 최소 높이다. 글자가 커져 라벨이 상자보다 높아지면 상자가 글을 따라 커지고 글을 자르지 않는다(앱 200% 에서 36 · 40 · 48 → 54 · 58 · 72, 100% 는 그대로). 웹은 높이가 rem 이라 이미 그렇다. SEED 디자인 원본(action-button root.minHeight)과 같고, 칩(03-E 결정 1 C)과 같은 규칙이다. 대가 — 같은 200% 에서 웹(72 · 80 · 96)이 앱보다 크다. 2026-10-22 사용자 결정 — 버튼 큰 글자 A(고르지 않은 안: 글 -static · 지금처럼 잘림 · 글 1.5배 상한).

이 판정은 부품 하나가 맡는다 — 웹 ResponsivePair · 앱 PResponsivePair(자식 둘 — 보조 버튼 · 주 버튼 순서, 쌓이면 주 버튼이 위). 시트 · 확인창 바닥의 짝 버튼도 이 부품을 쓴다 — 같은 판정을 바닥마다 따로 적지 않는다(2026-10-21 사용자 결정 — I-01 결과 확인 결정 6A).

아이콘제목 링크 복사

아이콘은 버튼의 동작을 눈으로 보이게 돕는다. 앞(Prefix)은 액션의 뜻을, 뒤(Suffix)는 chevron 처럼 동작을 돕는다. 라벨을 읽기 어려워지지 않게 꼭 필요할 때만 쓰고, 앞 · 뒤를 함께 쓰지 않는다.

로딩제목 링크 복사

저장처럼 시간이 걸리는 액션은 누른 버튼을 로딩으로 바꾼다. 라벨을 바꾸거나 비활성으로 돌리지 않는다.

Button 과 Chip제목 링크 복사

SEED 는 Button 과 Chip 을 이렇게 가른다. groo 도 같다 — 선택 · 필터는 Chip(같은 내용을 2 ~ 4가지로 바로 다르게 보면 Segmented Control)이 맡는다. Toggle Group 은 2026-10-09 걷었다.

groo 에만 있는 것제목 링크 복사

반반 바(split bar) — 액션 둘이 무게가 같고 한 묶음으로 읽힐 때, 본문 폭을 채운 네모 바를 반으로 갈라 각 칸에 하나씩 둔다(예: 내역 분할의 항목 추가 · 균등 분할).

• 컨테이너: display:flex; width:100%; background:var(--color-bg-layer-basement); border:1px solid var(--color-stroke-neutral-weak); border-radius:var(--radius-r2); overflow:hidden.
• 각 칸: flex:1 의 ghost 버튼, 모서리 없음(컨테이너가 깎는다).
• 칸 사이는 1px stroke-neutral-weak 구분선을 글자 높이만큼만 긋는다 — 끝까지 그으면 두 칸이 벽으로 막힌 것처럼 보인다.
• 얇게 — xsmall 높이(32). 목록에 줄을 더하는 성격이라 본문 행보다 무거우면 안 된다. 알약 모양은 쓰지 않는다(segmented 와 헷갈린다).
• 선택이 아니라 실행이다. 눌린 상태(data-state=on)가 없다. 셋 이상으로 나누지 않는다.

가장자리 맞춤(flush) — SEED 의 bleed 와 같은 기능이다.

• flush="left" | "right" — 그 방향 가로 여백을 0 으로 한다.
• 대상: ghost + 앞 아이콘이 컨테이너 가장자리의 첫 · 끝 요소일 때. 글자만 있는 ghost 에는 쓰지 않는다.
• flush ghost 는 텍스트 버튼이다 — 누름 · 호버에 배경을 깔지 않고 글자색으로만 반응한다(neutralSubtle → 누르면 fg-neutral). 한쪽 여백만 0 이라 채움 상자가 좌우 비대칭이 되기 때문이다.
• 그래서 flush 는 ghostColor 를 덮는다 — 빨간 글자를 지켜야 하는 삭제(critical)에는 쓰지 않는다.
• 아이콘만 있는 단추(iconOnly)는 여백을 0 으로 하지 않고 상자째 번진다 — 줄의 첫 · 끝에 선 아이콘 단추(달 줄의 ‹ › · 줄 끝 닫기)는 상자를 바깥으로 (상자 − 아이콘) ÷ 2 만큼 내어(음수 여백) 아이콘이 화면 여백 선에 닿게 한다 — small 36 · 아이콘 16 이면 10, 앱 40 · 아이콘 18 이면 11. 상자가 대칭으로 남으므로 누름 · 호버 바탕은 보통 단추처럼 깐다. 누르는 영역 44 도 같이 번진다(줄 안이면 List 의 "줄 끝 작은 버튼" 처럼 줄보다 이긴다). 아이콘이 여백 선 안쪽으로 10 남짓 들어가 글 · 목록 줄과 왼쪽 · 오른쪽 선이 어긋나던 것을 막는다(2026-10-29 I-29 — I-08 7 달 줄 ← −10 · 앱 가계부 머리 _bleedEnd 선례).

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/button.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

기본제목 링크 복사

import { Button } from "@/components/ui/button"

<Button>저장</Button>

변형제목 링크 복사

<Button variant="brandSolid">거래 추가</Button>
<Button variant="neutralSolid">저장</Button>
<Button variant="neutralWeak">취소</Button>
<Button variant="criticalSolid">삭제</Button>
<Button variant="brandOutline">자세히</Button>
<Button variant="neutralOutline">건너뛰기</Button>
<Button variant="ghost">더보기</Button>

크기제목 링크 복사

<Button size="xsmall">라벨</Button>
<Button size="small">라벨</Button>
<Button size="medium">라벨</Button>
<Button size="large">라벨</Button>

아이콘제목 링크 복사

import { ChevronRight, Plus, Search } from "lucide-react"

<Button variant="brandSolid"><Plus />거래 추가</Button>
<Button variant="neutralWeak">전체 보기<ChevronRight /></Button>
<Button variant="ghost" ghostColor="neutralSubtle" layout="iconOnly" aria-label="검색">
  <Search />
</Button>

ghost 글자색제목 링크 복사

<Button variant="ghost">편집</Button>
<Button variant="ghost" ghostColor="neutralSubtle">더보기</Button>
<Button variant="ghost" ghostColor="brand">자세히 보기</Button>
<Button variant="ghost" ghostColor="critical">삭제</Button>

비활성 · 로딩제목 링크 복사

const [saving, setSaving] = useState(false)

<Button disabled>저장</Button>
<Button loading={saving} onClick={async () => { setSaving(true); await save(); setSaving(false) }}>
  저장
</Button>

채움제목 링크 복사

<Button size="large" className="w-full">저장</Button>

모달 footer제목 링크 복사

<footer className="flex items-center gap-2">
  <Button variant="ghost" ghostColor="critical" size="small" className="mr-auto">삭제</Button>
  <Button variant="neutralWeak" size="small">취소</Button>
  <Button size="small">저장</Button>
</footer>

Behavior제목 링크 복사

Form 안 — type="submit" 을 적어야 제출한다. type="button" 은 제출하지 않는다.

앱 — 버튼(PButton)도 포커스를 받아 Tab 순서에 든다. 하드웨어 키보드로 옮길 때만 웹과 같은 링(2px · 띄움 2px · stroke-focus-ring)을 그리고 — Flutter 의 FocusHighlightMode.traditional — 손가락으로 누를 때는 그리지 않는다(사용자 결정 2026-10-08, DESIGN.md State › 앱의 키보드 포커스).

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 강조 버튼(brandSolid · neutralSolid · criticalSolid)은 한 화면에 하나.
• 모달 footer 는 [취소 neutralWeak] [저장 neutralSolid], 삭제는 왼쪽 ghost + critical.
• 되돌릴 수 없는 작업의 확정은 확인 창의 criticalSolid.
• 증권 매매 한 쌍만 예외 — [매도] brandSolid · [매수] criticalSolid(국내 통념).
• 아이콘만 있는 버튼에는 이름을 단다.
• 모바일 하단 CTA 는 large + 채움 + 안전 영역(pb-safe).

❌ Don't제목 링크 복사

• 강조 버튼을 한 화면에 여럿.
• 셋 이상을 한 줄에 — 피한다, 더 있으면 더보기.
• brandSolid 를 일반 저장 · 확인에 — 브랜드 색이 흩어진다.
• Outline 을 Solid 와 섞기.
• 앞 · 뒤 아이콘을 함께.
• disabled 버튼에 호버 · 누름 반응.

Specification제목 링크 복사

button.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 버튼을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• large 는 48 이다(SEED 52) — 여백 · 글자 · 아이콘은 SEED large 그대로다.
• 테두리 · 투명 누름은 SEED 가 투명도 있는 색(stroke.neutral-muted · bg.transparent-pressed)이라, 불투명한 가장 가까운 역할(stroke-neutral-weak · bg-layer-default-pressed)을 쓴다 — design.md 검사기가 8자리 hex 를 받지 않는다.
• 웹의 hovered · focused 상태를 더한다(v106). focused 는 앱의 키보드 포커스에도 그린다(2026-10-08).
• 누름은 누른 동작이 끝날 때까지 한 번이다(onClick 이 돌려준 Promise) — SEED 는 정하지 않았다.
• 로딩 중 누르기를 자동으로 막는다(SEED 는 막지 않는다).
• neutralSolid 의 누름은 새 역할 bg-neutral-inverted-pressed(gray-800, v112)다.

Migration notes제목 링크 복사

2026-10-30 — 아이콘 단추의 가장자리 맞춤제목 링크 복사

"가장자리 맞춤(flush)" 에 아이콘만 있는 단추의 규칙을 더했다 — 여백을 0 으로 하는 글 단추와 달리 상자째 (상자 − 아이콘) ÷ 2 만큼 번져 아이콘이 화면 여백 선에 닿는다(2026-10-29 I-29 — I-08 7 달 줄 · 앱 _bleedEnd 선례). 값 · 토큰 변경 없음 — 번지는 양은 크기 표(상자 · 아이콘)에서 나온다. 레시피 flush 는 아직 글 단추용(여백 0)이고, 아이콘 단추는 놓는 자리가 음수 여백으로 번진다. 옛 스펙은 button.history/v-pre-cleanup-1030.md.

2026-10-29 — 증권 매매 단추 예외제목 링크 복사

사용자 결정 C7 B — 지시서가 "지금 뜻 그대로" 로 넘긴 [매도] brandSolid · [매수] criticalSolid 가 변형 뜻(브랜드 = 중심 동작 하나 · 빨강 = 되돌릴 수 없는 확정)과 맞지 않아 그림으로 물었다. 국내 통념을 이 한 쌍의 예외로 적는다. 앱 매도는 옛 bg-informative-solid → brandSolid, 사이 10 → 8. 값 · 토큰 변경 없음.

2026-10-25 — 시트 바닥의 [삭제] 도 모달 footer 꼴제목 링크 복사

사용자 결정 — 목록 줄에는 ⋮ 를 두지 않고, 들어간 화면의 동작이 하나(삭제)면 바닥 왼쪽 [삭제] ghost + critical 이다(button.md 모달 footer 꼴 — 시트도 같게, Menu 의 "줄의 동작"). "모달 footer" 에 시트 바닥 · 들어간 화면 두 줄을 더하고, critical 의 쓰임에 시트 바닥을 적었다. 시트 바닥의 폭(삭제 글자만큼 · 주 버튼이 남은 폭)은 모달 footer 의 왼쪽 삭제를 시트의 전체 폭 버튼에 옮긴 것이다. 값 변경 없음.

2026-10-22 — 셋 이상 나란히는 "피한다"제목 링크 복사

"셋 이상 나란히 두지 않는다" 를 SEED 말 그대로 "피한다" 로 낮췄다(남은 규칙 R7 — 화면은 같다). "강조 버튼은 한 화면에 하나"(SEED Hierarchy 표 "화면 내 개수 1개") · "모달 footer 를 neutralOutline 둘로 두지 않는다"(SEED 조합 규칙과 같은 쪽)는 그대로다(R8 · R9). 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 값 변경 없음.

2026-10-08 — 앱 적용이 남긴 것제목 링크 복사

앱 적용(desk-front #428 ~ #430 · desk-app #407 ~ #410)이 남긴 문제를 사용자가 비교 페이지에서 정했다.

• Brand Outline 의 로딩 원(8) — 호가 bg-brand-solid 라 다크의 투명한 버튼 위에서 1.73:1(트랙과 1.34)이었다. Progress Circle brand 톤과 같은 stroke-brand-solid(다크는 밝은 짝 — 6.10)로 바꿨다. 트랙 bg-brand-weak-pressed 는 그대로다.
• 두 번 누름(F3) — onClick 이 Promise 를 돌려주면 끝날 때까지 다음 누름을 버린다. 시간 창(Desk 웹 Button 의 옛 600ms)은 두지 않는다 — 앱 옛 시트의 잠금과 같다. 로딩 중에 누름을 삼키는 것은 그대로다. 레시피의 onClick 은 돌려준 값을 받는 꼴((event) => unknown)이 됐다.
• 앱의 키보드 포커스(E2) — 키보드로 옮길 때만 웹과 같은 링을 그리고, PButton 도 포커스를 받는다(DESIGN.md State · Inclusive Design).

2026-09-30 — SEED Action Button 구조로제목 링크 복사

사용자가 비교 페이지(https://claude.ai/artifact/JRfDTChty6VDZzzqpWSF6C)에서 정했다 — 변형은 SEED 7가지만(옛 dangerSoft 는 없앰, 정말 위험한 건 criticalSolid) · 일반 CTA 는 neutralSolid · 크기는 SEED 틀 + large 48 · 모양은 SEED(모서리 8 · 12 · 알약, 글자 700) · 확인 창을 여는 삭제는 ghost + critical · brandSolid 는 핵심 액션에만 · 로딩은 SEED 모양 + 누름 자동 막기.

제품(Desk 웹 197 · 앱 133 · HR 웹 176곳)은 앱 적용 단계에서 옮긴다. 그동안 옛 이름은 아래처럼 읽는다.

그 밖에 바뀐 것 — 누름은 밝기 95% · 0.98 배 → 누름 색 + 2px 거리 축소(v104), 비활성은 50% 불투명 → 전용 색(v106), 글자 굵기 500 → 700, 모서리 4 → 8(large 12, xsmall 알약), 아이콘–글자 간격 8 고정 → 크기마다(4 · 4 · 6 · 8), 로딩 스피너는 라벨 앞 → 라벨 자리.

앱에 옮길 때 — cn 부터. 새 cva 는 groo 스케일 이름(text-t4 · px-x4 · rounded-r2)을 쓴다. 기본 tailwind-merge 는 text-t4 를 글자색으로 읽어 앞의 text-fg-neutral-inverted 를 지우고(짙은 버튼의 흰 글자가 사라진다), px-x4 를 여백으로 못 읽어 p-0 덮어쓰기가 먹지 않는다. 레시피 lib/utils.ts 처럼 spacing · radius · text 스케일을 extendTailwindMerge 에 등록한다 — Desk 웹의 cn 은 지금 옛 글자 이름만 안다.

다른 컴포넌트에 남은 옛 이름 — 버튼을 부르는 레시피 코드(alert-dialog · calendar · carousel · pagination · sidebar)와 그 스펙, 모달 footer 규칙(dialog · drawer · alert-dialog)은 이 변경에서 옮겼다. 아래는 옛 이름을 글로만 적고 있어 각 컴포넌트 차례에 옮긴다 — 예제 속 JSX(tooltip · sheet · popover · form · dropdown-menu · drawer · dialog · card · alert-dialog · table · spinner 예제), 스펙 본문(table · popover · spinner · context-menu · dropdown-menu · calendar 의 nav outline — toggle-group 은 2026-10-09 걷었고 icon-picker 는 Input Button 으로, collapsible 은 2026-10-10 Accordion 항목 모양의 트리거로 다시 썼다), DESIGN.md 의 다른 컴포넌트 절(Form 의 button-primary lg · Pagination 의 페이지 버튼), 미리보기의 빈 화면 · 폼 · 결재 행(Outline 과 Solid 를 한 줄에 둔다 — Outline 조합 규칙과 어긋난다).

2026-09-16 — default(36) 를 정식 사이즈로 올리고 모달 footer 를 그걸로제목 링크 복사

Sizes 표는 원래 sm 32 · md 40 · lg 48 셋이었는데, desk 웹 구현에는 shadcn 이름을 그대로 둔 default(높이 36 · 좌우 양쪽 16 · 14px)가 하나 더 있었고 그게 cva 기본값이다. 모달 footer 20종 실측에서 표준 footer 40 과 손수 footer 36 이 섞여 있었고, 화면으로 보니 40 은 대화상자에 비해 굵어 사용자가 36 을 골랐다 — 2026-09-30 구조에서는 small(36)이 그 자리다.

2026-08 — 채움 버튼을 info 로, 모달 footer 좌측을 옅은 채움으로제목 링크 복사

default 채움색을 브랜드 남색에서 정보 파랑으로 바꾸고(남색은 버튼 채움으로 무겁다), 모달 footer 의 취소는 secondary, 삭제는 dangerSoft 로 두었다. 2026-09-30 에 일반 CTA 는 neutralSolid, 취소는 neutralWeak, 삭제는 ghost + critical 로 다시 정했다.