ZARITALK DESIGN DOCS
Tokens
Colors
Type Scale
Components
Button
Input
Typography
Alert
Badge
Tag
Tab
CheckBox
Toggle
Rating
Modal
BottomSheet
Divider
LoadingSpinner
Skeleton
Radio
TextArea
DropDown
Tooltip
SplitRating
Slider
AutoHeightTextArea
Avatar
HighlightTypography
RedDot
HR
VR
Overlay
Loading
Popup
Menu
AlertWithConfirmButton
MultiCheckBox
TabBottomBorder
Calendar
DatePicker
TimePicker
WeekPicker
DayPicker
InfiniteScroll
PullToRefresh
RevealAnimation
SignaturePad
ImagePreview
Variants
Design Docs
Variants버튼과 입력 컴포넌트의 다양한 변형을 모아놓은 페이지입니다.
ExamplesButton Variants
BasicButton - Default기본 버튼 컴포넌트입니다. 다양한 variant를 지원합니다.
BasicButton - Disabled비활성화 상태의 버튼입니다.
BasicButton - Loading로딩 상태를 표시하는 버튼입니다.
BasicButton - With Icons좌우 아이콘을 포함한 버튼입니다.
IconButton아이콘과 텍스트를 함께 표시하는 버튼입니다. 로딩 상태를 지원합니다.
ActionButton플로팅 액션 버튼으로 사용되는 둥근 버튼입니다.
MiniButton작은 크기의 버튼입니다.
SmallButton작은 크기의 버튼으로 variant 스타일을 지원합니다.
Input Variants
InputCalendar날짜를 선택할 수 있는 캘린더 팝업이 포함된 입력 컴포넌트입니다.
InputCalendar - Disabled비활성화 상태의 InputCalendar입니다.
InputDate1일부터 31일까지 일(day) 숫자를 선택하는 입력 컴포넌트입니다.
InputDate - With Unit단위 텍스트를 표시하는 InputDate입니다.
InputKakaoAddress카카오 주소 검색 API를 활용한 키워드 자동완성 입력 컴포넌트입니다. 로그인 세션(userPk)이 필요하여 데모에서는 비활성 상태입니다.
Props
NameTypeDefaultRequiredDescription