SLUR Design System × slur-guidelines

Button

종류

크기 · 상태

햄버거(메뉴) 버튼 · 48

Input

텍스트 필드 · 아이콘

이메일 이메일은 절대 공유되지 않습니다.

검색

상태

오류 올바른 이메일 주소를 입력하세요.

성공 좋습니다.

비활성

읽기 전용

텍스트에리어 · 셀렉트

메시지

국가

Selection

체크박스 · 라디오

제품 업데이트 구독 부분 선택(indeterminate) 비활성 옵션

일반 배송 빠른 배송 매장 수령

토글

Badge

Soft · Solid · Outline

Neutral Brand Success Warning Danger

Neutral Brand Success Danger

점 · 카운트 · 크기 · 칩

활성 대기 8 99+ SM MD 디자인 리서치

Card

종류

기본

테두리 + 은은한 그림자. 가장 자주 쓰는 컨테이너.

플랫

테두리만, 그림자 없음. 밀도 높은 목록에.

엘리베이티드

팝오버·모달에 쓰는 더 강한 그림자.

통계 카드 (m_stat) · 차트 토큰

월 매출

₩12.4M

▲ 12.5%지난달 대비

신규 고객

1,284

▼ 3.1%지난달 대비

활성 구독

642

—변동 없음

전환율

3.8%

▲ 0.4%p지난주 대비

구조 · 인터랙티브 · 리스트

팀 플랜

연간 결제

Alert

제목 + 본문 · 인라인 · 배너

알려드립니다새 버전이 출시되었어요. 새로고침하면 최신 기능을 사용할 수 있습니다.

결제 완료구독이 내년까지 활성화되었습니다.

저장 공간이 거의 찼습니다할당량의 92%를 사용했습니다.

카드가 거절되었습니다.

워크스페이스 설정을 마저 하세요5단계 중 2단계 완료

Navigation

탭 · 밑줄 / 필 — 방향키·Home/End로 이동(slur.js)

개요 패널 — 탭에 포커스를 두고 ←/→를 눌러 보세요.

활동 패널

설정 패널

멤버 패널

사이드바 · 브레드크럼

대시보드

왼쪽 사이드바 항목을 클릭해 전환해 보세요.

Table

청구서 — 정렬 헤더(aria-sort) · 행 액션 메뉴 · 페이지네이션

	상태
INInitech	연체	$12,750.00	6/03
SIStark Industries	대기	$5,600.00	5/21
ACAcme Corp	완료	$2,400.00	6/12

24건 중 1–3

State

4상태 — 블록의 data-state(loading·empty·error·success)만 바꾸면 global.css가 i_status 안의 슬롯을 고른다

불러오는 중…

등록된 프로그램이 없습니다 첫 프로그램을 만들면 여기에 표시됩니다.

불러오지 못했습니다 네트워크 상태를 확인하고 다시 시도해 주세요.

온보딩 프로그램진행 중
리더십 워크숍예정

스피너 — 문장 옆(위 4상태 기본형) · 단독 · 버튼 안

스켈레톤 — 표·카드 목록처럼 모양이 정해진 넓은 영역의 선택지(기본은 스피너+문장). 뼈대 행은 페이지 CSS(p_skel_row), 읽힐 문장은 a11y_hidden으로