컴포넌트 · 액션

Button

사용자가 행동을 실행하게 합니다. 8가지 variant와 5가지 size가 있으며, 높이와 글자 크기는 플랫폼 토큰(--control-h-*)을 따라 자동으로 바뀝니다.

Import
@ongi/ui/button
기반
Radix Slot (asChild)
상태
Stable

구조

  1. 1

    Container

    높이 --control-h-*, 라운드 --control-radius

  2. 2

    Leading icon (선택)

    텍스트 크기의 1.15배, 간격 6px

  3. 3

    Label

    Semibold, 동사형 1–3 단어

  4. 4

    Trailing icon (선택)

    다음 단계 · 외부 이동을 암시할 때

Variant

화면의 행동 위계에 따라 선택합니다. 한 영역에 Primary는 하나만 둡니다.

Variant용도예시
primary화면의 핵심 행동 (영역당 1개)결제하기 · 저장 · 승인
secondary브랜드 맥락의 보조 행동쿠폰 적용 · 포인트 사용
neutral취소 · 닫기 · 일반 보조 행동취소 · 이전
outline업무용 웹 툴바 · 필터 옆 액션엑셀 다운로드 · 필터 초기화
ghost밀도 높은 영역의 3차 행동더보기 · 전체 보기
inverse프리미엄 강조 · 다크 배경 대비회원가입 · 카드 등록
danger되돌릴 수 없는 파괴적 행동 (확인 다이얼로그 안)결제 취소 · 계정 삭제
danger-subtle파괴적이지만 1차 트리거삭제 · 해지 요청

Size

같은 size라도 플랫폼마다 실제 높이가 다릅니다. 아래는 각 플랫폼 토큰으로 렌더링한 결과입니다.

Admin · Console · Sales
App · QR
POS
SizeAdminApp · QRPOSKIOSK주 용도
xs28324048테이블 행 내부 액션
sm32384860툴바 · 카드 헤더
md36485672기본
lg44546488폼 제출 · 다이얼로그
xl525876104하단 고정 CTA · 결제

상태

로딩

텍스트를 숨기고(invisible) 스피너를 가운데 겹쳐서, 버튼 폭이 바뀌지 않게 합니다. 로딩 중에는 자동으로 disabled 됩니다.

아이콘 · IconButton

버튼 배치

다이얼로그 · 데스크톱 — 우측 정렬, Primary가 오른쪽
모바일 하단 CTA — 1:2 비율 또는 전체 폭

이렇게 하세요

  • Primary는 영역에서 가장 오른쪽(데스크톱) 또는 가장 넓게(모바일)
  • 결제 CTA에는 최종 금액을 포함
  • 파괴적 행동은 확인 다이얼로그 안에서 danger로

이렇게 하지 마세요

  • Primary 두 개 나란히 배치
  • 버튼 텍스트 줄바꿈 (문구를 줄이세요)
  • 링크 이동에 Button을 쓰고 asChild 누락

Props

PropTypeDefault설명
variant"primary" | "secondary" | "neutral" | "outline" | "ghost" | "inverse" | "danger" | "danger-subtle""primary"시각적 위계
size"xs" | "sm" | "md" | "lg" | "xl""md"플랫폼 토큰 기반 높이
blockbooleanfalse부모 폭 100%
loadingbooleanfalse스피너 표시 + disabled
leading / trailingReactNode—아이콘 슬롯
asChildbooleanfalseNext <Link> 등 자식 요소에 스타일 위임