채널톡 · Bezier Design System preview

1

Actions / Buttons

Buttonprimary / secondary / tertiary · radius scales with size

button-primarystyleVariant="primary"

button-secondarystyleVariant="secondary"

button-floatingelevation-2/3 부양

새 대화

ButtonGroup정렬 래퍼

AlphaButton차세대 버튼

AlphaIconButtonaccent fill/icon 50종+

AlphaFloatingButtonFAB · fill-grey

AlphaFloatingIconButton아이콘 플로팅

AlphaToggleButton선택 상태 = accent blue

AI 응답 자동 번역

AlphaToggleButtonGroup단일/다중 선택

목록보드캘린더

AlphaToggleEmojiButtonGroup이모지 리액션(콘텐츠)

👍 3❤️ 1🎉

SegmentedControlelevation-1 selected

2

Forms / Inputs

TextFieldborder = inner-shadow ring; focus → indigo

대화 검색

refund

TextField · clear/error

박지훈

bad@

TextAreaTextAreaHeight

고객 요청 사항을 입력하세요…

Select팝업 elevation-3

박지훈

Checkboxgreen-heavier fill

자동 응답

RadioGroupgreen accent active

전체 / 미해결

Switchgreen fill · knob elevation-2

Slidergreen fill · floating thumb · track r3

FormControlLabel(*,Help) + Field + Helper

이메일 *

seoyeon.kim@maple.co

알림은 이 주소로 전송돼요.

FormGroup라벨+필드+헬퍼 그룹

담당자

담당자 선택

FormLabel필드 제목

전화번호 *선택 입력 라벨

FormHelperTextErrorMessage 스토리

도움이 되는 설명 텍스트 형식이 올바르지 않아요.

3

Overlays / Modals / Tooltips

Modalradius-20 · elevation-4 · scrim 40%

ConfirmModal확인/취소 합성형

삭제할까요?

되돌릴 수 없어요.

AlphaDialogPrimitive헤드리스 다이얼로그

Trigger · Portal · Overlay · Content · Title · Close

Overlay위치 지정 · z 1000

팝오버 메뉴

Tooltipsurface-high · elevation-3 · z 1300

LegacyTooltipelevation-2 · 마이그레이션

AlphaTooltipPrimitive헤드리스 + Arrow

4

Navigation

Tabsline style · indigo active underline

대화24

고객

통계

NavItem · NavGroup활성 = fill-accent-blue · radius-6

지원 팀

받은 대화함24

내 대화5

ListItemconversation row · radius-12

김

김서연환불 관련해서 문의드려요…

2분

이

이준호감사합니다! 잘 받았어요 👍

1시간

OutlineItem · SectionLabelindent tree · accent blue active

워크스페이스

받은 대화함

VIP 고객

KeyValueItem메타데이터 행 · MultiLine

주문번호#MS-20418

플랜Pro

5

Data display / Avatars

Avatarsmooth squircle + status

유 민 SJ

AvatarGroup겹침 · z-floating

ABC+5

CheckableAvatar선택 = blue ring + check

김 SC

AlphaAvatar · AlphaAvatarGroup차세대 · computed-status-gap

AD+2

Badgecount · red fill

31299+5

AlphaStatusBadgestatus + surface

온라인자리비움

Status상태 점/인디케이터

Online Away Offline

Tag20% tint + solid text

VIP 결제완료 대기중 신규

Icon602 SVG · 24×24 · currentColor · outline + -filled

Emoji콘텐츠 리액션 (UI 아이콘 아님)

👋🎉🙏🔥

Text타이포 프리미티브

heading-xsmall text-medium 본문 text-2xsmall caption

6

Feedback / Status

Banneraccent 20% tint + leading filled icon + bold lead + close X · radius-12

Toastfloating dark bar · neutral-heaviest 85% · filled icon + action link

대화를 종료했어요실행 취소

담당자에게 배정했어요보기

ProgressBargreen gradient · radius-3

상담 만족도 68%

Spinner--b-spinner-color

AlphaLoadertrack + indicator color

Help물음표 트리거

도움이 되었나요?

7

Layout / Primitives

Box스타일 프롭 컨테이너

Center자식 가운데 정렬

StackVStack / HStack · gap

ABC

LegacyStack구버전 · 마이그레이션

123

Divider1px neutral hairline · full/vertical

받은 대화함

전체 24건

Reply

Note

Snooze

SmoothCornersBoxcontinuous-curvature squircle · 시그니처

대화로 매출을 만드는 인디고-바이올렛 시스템

Components

Actions / Buttons

Forms / Inputs

Overlays / Modals / Tooltips

Navigation

워크스페이스

Data display / Avatars

Feedback / Status

Layout / Primitives

Key screen · Desk 인박스

받은 대화함