v0.11.0· ui-web 0.7.0

ComponentsP3 본문

AuthMethodButton

WDS 테마 인증 방식 버튼 — 패스키·조직 SSO·비밀번호·이메일·매직링크. 코어 Button(secondary) 위에 코어 아이콘 + 한국어 라벨을 얹은 얇은 래퍼입니다.

마지막 업데이트 2026-06-22

한눈에#

WDS가 테마를 소유하는 인증 방식 버튼입니다 — 패스키·조직 SSO·비밀번호·이메일·매직링크. 코어 Button(secondary) 위에 코어 아이콘과 한국어 기본 라벨을 얹습니다. 색·로고·라벨이 브랜드 소유라 테마 전환하지 않는 ProviderButton(Apple/Google)과 짝을 이루는 두 번째 인증 버튼 종류입니다.

  • 방식 5종
  • Button(secondary) 래퍼
  • 코어 아이콘 + 한국어 라벨
  • ProviderButton과 짝

기본 — method 프리셋

방식#

method 프리셋이 코어 아이콘 + 한국어 기본 라벨을 공급합니다. 다섯 종을 모두 지원합니다.

method — passkey / sso / password / email / magic-link

라벨·아이콘 오버라이드#

label로 라벨을, icon으로 선행 아이콘을 교체합니다. method 없이 children만으로도 쓸 수 있습니다.

label / icon 오버라이드

상태#

Button API를 그대로 패스스루합니다 — loading·disabled로 진행/비활성 상태를 표현합니다.

loading / disabled

위계 조정#

기본 variant="secondary"이나, 1차 방식을 강조할 땐 variant="primary"로 올립니다. 단, LoginMethods의 prominence parity를 깨지 않도록 신중히 씁니다.

variant — secondary(기본) / primary

사용#

  • 이럴 때: 패스키·조직 SSO·비밀번호·이메일·매직링크처럼 WDS가 테마를 소유하는 인증 방식을 노출할 때. 보통 LoginMethods 그룹 안에서 ProviderButton과 함께 씁니다.
  • Apple/Google에는 쓰지 마세요: 서드파티 사인인은 브랜드가 색·로고·라벨을 고정하므로 ProviderButton을 씁니다. 일반 Button 래퍼로 표현하면 브랜드 위반입니다.
  • 패스키 1차 경로: 패스키의 1차 UX는 이메일 필드 autocomplete="username webauthn" autofill(conditional UI)입니다. method="passkey" 버튼은 보완/명시 경로로 두세요 — 자세한 내용은 Login 패턴.
  • 일반 행동: 인증과 무관한 일반 CTA는 Button을 씁니다.

Props#

Prop타입기본값설명
method'passkey' | 'sso' | 'password' | 'email' | 'magic-link'—인증 방식 프리셋 — 코어 아이콘 + 한국어 기본 라벨을 공급
labelstring—method 기본 라벨을 대체. (또는 children)
iconReactNode—method 아이콘을 대체하는 선행 아이콘
variant'primary' | 'secondary' | 'ghost''secondary'Button 시각 위계 — 기본 secondary
fullWidthbooleantrue부모 폭 채움 — 기본 true(방식 스택의 균등 폭)
…restOmit<ButtonProps, 'children'>—onClick·disabled·loading·type·ref 등 Button props 전달

method·label·children 중 하나로 라벨을 제공해야 합니다(없으면 런타임 오류).

접근성#

  • 아이콘은 장식(aria-hidden) — 접근성 이름은 라벨 텍스트(“패스키로 로그인” 등)가 전달합니다.
  • 최소 높이 44px·:focus-visible 포커스 링은 코어 Button이 보장합니다(WCAG 2.4.7·타깃 크기).
  • loading 시 aria-busy로 진행을, disabled로 비활성을 보조 기술에 전달합니다.

관련#