Button

화면의 주 행동이나 보조 행동을 native button semantics로 실행하는 action control입니다.

예제

계속 취소

사용해야 할 때

제출, 저장, 결제, 다음 단계처럼 사용자가 명시적으로 실행하는 주 행동과 보조 행동에 사용합니다. 한 화면의 dominant fill action은 하나를 우선합니다.

사용하지 말아야 할 때

단순 페이지 이동 text, 여러 개의 경쟁하는 primary action, 상태 label에는 사용하지 않습니다. 페이지 이동만 수행하면 의미에 맞는 link를 사용합니다.

구조

native button 안에 leading icon slot, label, trailing icon slot을 둡니다. loading spinner는 overlay되며 accessible label은 DOM에 남습니다.

크기와 변형

small, medium, large는 최소 44px, 48px, 56px 높이입니다. fill, weak, outline 세 위계가 있고 width="full"은 variant가 아닌 container layout behavior입니다.

상태와 동작

web은 hover와 focus-visible을 추가하고 공통 design state는 default, pressed, disabled입니다. loading || disabled가 native disabled를 만들며 loading은 aria-busy="true"입니다.

반응형 동작

모바일에서는 primary action에 width="full"을 사용할 수 있고 데스크톱에서는 기본 hug가 일반적입니다. 별도 mobile component를 만들지 않습니다.

접근성

native Enter/Space activation을 유지합니다. visible label을 제거하지 않고 owned Icon만 slot에 허용합니다. slot icon의 label은 복제 시 제거되어 장식용이 되고 다른 element는 runtime에서도 버립니다. loading 중에도 accessible name이 유지되며 focus-visible ring은 semantic focus token을 사용합니다.

React 예제

import { Button, Icon } from '@maxxuxx/react';
import '@maxxuxx/react/styles.css';

export function ContinueButton() {
  return (
    <Button trailingIcon={<Icon name="chevron-right" size={20} />}>
      다음으로
    </Button>
  );
}

API

사용 토큰

• size/control/small, size/control/medium, size/control/large, radius/md
• color/action/*, color/border/*, color/text/disabled, color/bg/*, color/focus/ring

Figma

Button component set은 Size 3 × Variant 3 × State Default/Pressed/Disabled = 27 variants를 제공합니다. Label TEXT, Loading, Show leading icon, Show trailing icon BOOLEAN, leading/trailing INSTANCE_SWAP properties를 사용하며, width는 variant가 아닌 layout guidance입니다. 모든 제품 색상과 크기·간격·radius는 semantic Variable에 연결되어 있고, property preview에서 아이콘 슬롯과 Loading overlay를 함께 확인할 수 있습니다.

지원 상태