메인 콘텐츠로 건너뛰기

A1

Button

variant × state matrix · hover/focus/active 정적 시각화 · loading 시 `aria-busy="true"` + visually-hidden label

정책 SSoT — components.md §A1

상태 × variant 그리드

variantdefaulthover(정적 시연)focus-visible(정적 시연)active(정적 시연)disabledloadingerroremptymode-switch[base-light]sidebar-collapsed
primary
secondary
ghost
destructive

Size

sm (32px) · md (40px, 기본) · lg (48px)

sm · 32px
md · 40px
lg · 48px

Creator Studio CTA

disabled reason · loading 중복 실행 방지 · success 후 보조 CTA

첫 장면 등록과 뷰 preview 확인이 필요합니다.

저장 중에는 같은 요청을 다시 실행하지 않습니다.

Responsive

sm/md/lg viewport별 wrap·간격·터치 영역

동일 컨텐츠를 viewport별 너비 박스에 렌더

xs375px· <576px · 모바일 최저 폭
sm576px· >=576px · 큰 모바일/작은 태블릿
md768px· >=768px · 태블릿
lg992px· >=992px · 작은 데스크톱
xl1200px· >=1200px · 데스크톱 기본 검증 폭
xxl1400px· >=1400px · 와이드 데스크톱
RE:Verse 앱 보기