Text Button
Primitive누르면 액션을 일으키는 텍스트 요소입니다.
구조도
- Root : Button 컴포넌트를 감싸는 컨테이너 영역
- Label : Button에 대한 정보를 전달하는 라벨
- Icon : Button에 대한 정보를 전달하는 아이콘
컴포넌트 미리보기
옵션
Size
Text Button은 small, medium, large 3개의 사이즈를 가질 수 있습니다. medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게 적절하게 사용합니다.
Variant
Variant의 중요도는 Primary로 갈수록 높아지며, Secondary로 갈수록 낮아집니다. 화면 내에서 액션의 중요도에 따라 버튼의 variant를 다르게 사용합니다.
Danger Variant
Danger variant는 유저에게 위험 요소에 대한 경고를 전달할 때 사용합니다. 이 버튼으로 인해 파괴적 변화나 부정적인 행동이 일어날 수 있다는 시각적 인지를 제공합니다.
Style
Basic, Underlined 2개의 스타일을 사용할 수 있습니다.
Bold
Text Button이 전달하고자 하는 의미가 강조되어야 할 경우, Bold를 사용할 수 있습니다.
Disabled
Disabled 상태는 Text Button이 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.
옵션 테이블
| 속성 | 값 | 기본값 |
| size | small, medium, large | medium |
| variant | primary, secondary, secondary-low, accent, danger | primary |
| style | basic, underlined | basic |
| bold | true, false | false |
| is disabled | true, false | false |
상호작용
터치 / 마우스 상호작용
마우스 클릭 또는 터치로 Text Button과 상호작용할 수 있는 영역입니다.
PC 환경에서 Text Button에 Hover 시 커서가 포인터 모양으로 바뀝니다.
Disabled 상태인 경우 상호작용이 불가능합니다.
키보드 상호작용
Space 또는 Enter 키를 통해 Button과 상호작용할 수 있습니다.
Label은 1줄을 초과할 수 없으며 좌우 Margin 각 16px을 유지한 범위 내에서만 텍스트가 노출될 수 있습니다. 범위를 초과한 텍스트 값은 입력될 수 없으며 말줄임 처리도 불가합니다.
가이드라인
Prefix Icon
상황에 따라 Text Button의 Label을 보조하는 Prefix icon을 사용할 수 있습니다.
Underlined
특정 페이지나 링크로 이동을 유도하는 경우, Underlined 옵션 사용을 권장합니다.
Suffix Icon
Suffix Icon에는 Chevron만 사용할 수 있습니다. 특정 기능이나 페이지로의 랜딩을 유도하는 역할을 합니다.