State
상태 표현은 컴포넌트나 상호작용 가능한 요소의 상태 또는 가능성을 사용자에게 전달해요.
버튼칩Enabled
버튼칩Pressed
버튼칩Selected
버튼칩Disabled
상태 표현의 유형
UI 상태에는 두 가지 유형이 있어요.
- 상호작용 상태는 사용자의 상호작용에 따라 바뀌는 상태예요. 예를 들어 버튼을 터치하고 있으면 눌린 상태로 표시돼요.
- 옵션 상태는 컴포넌트에 적용된 옵션에 따른 상태예요. 예를 들어 버튼에
disabled옵션을 적용하면 비활성화 상태로 표시돼요.
상호작용 상태와 옵션 상태는 한 상태가 다른 상태를 덮어쓸 수도 있고, 함께 적용될 수도 있어요.
Enabled
요소에 아무런 상호작용을 하지 않았을 때의 기본 상태예요.
Pressed
터치, 펜 등으로 요소를 누르고 있는 상호작용 상태예요. 눌린 동안 요소에 따라 표면 색이 바뀌거나 살짝 축소되어 입력이 전달됐음을 알려요. 자세한 내용은 Feedback 을 참고해요.
<button className="bg-bg-neutral-weak enabled:active:scale-[0.97] enabled:active:bg-bg-neutral-weak-pressed" />Selected
요소가 선택됐거나 활성화된 옵션 상태예요. 일반적으로 다른 상호작용 상태와 함께 표현돼요. 선택된 요소를 누르면 선택 색상은 유지한 채 눌림 피드백이 더해져요.
<button aria-pressed={selected} className="aria-pressed:bg-bg-neutral-inverted aria-pressed:text-fg-neutral-inverted" />Disabled
요소가 비활성화된 옵션 상태예요. 사용자의 상호작용을 받지 않지만, 다른 조건에 따라 상호작용이 가능해질 수 있음을 나타내요. 일반적으로 다른 상호작용 상태와 함께 표현되지 않아요.
<button disabled className="disabled:bg-bg-disabled disabled:text-fg-disabled" />직접 해 보기
칩을 눌러 선택해 보고, Disabled를 켜서 상호작용이 막히는 모습을 확인해요.
상태 조합
| 상태 | 색상 | 축소 | 비고 |
|---|---|---|---|
| Enabled | 기본 토큰 | — | |
| Pressed | -pressed 토큰 | 적용 | 누르는 동안만 |
| Selected | 선택 토큰 유지 | 누르면 적용 | Pressed와 함께 표현 |
| Loading | 기본 또는 -pressed 토큰 | 미적용 | 추가 입력을 받지 않아요 |
| Disabled | bg.disabled, fg.disabled | 미적용 | 다른 상태와 함께 표현하지 않아요 |
포커스
키보드로 이동할 때는 stroke.focus-ring 색상의 외곽선으로 포커스 위치를 보여줘요. 포인터로 누를 때는 보이지 않도록 focus-visible 에만 적용해요.
<button className="outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring" />