오더히어로 앱 · 디자인 시스템
UI 컴포넌트
스펙
프로덕션 토큰 기반 재사용 컴포넌트. 각 예시 아래
클래스명
을 그대로 쓰면 됩니다.
components.css
는
tokens.css
와 함께 사용(단독으로도 hex 폴백 동작).
⬇ 컴포넌트 파일 다운로드
컴포넌트
components.css
토큰
tokens.css
01
버튼 · Button
Primary
Secondary
Navy
Outline
Ghost
Disabled
<button class="
oh-btn oh-btn--primary
"> ·
--secondary --navy --outline --ghost --disabled
Large
Medium
Small
사이즈:
oh-btn--lg / --md / --sm
· 전체너비:
oh-btn--block
로그인
회원가입
실제 로그인 화면 패턴 ·
oh-btn--block oh-btn--lg
02
입력 · Input
상호명
*
이메일
이메일 형식이 올바르지 않아요
oh-field / oh-label / oh-input
· 에러:
oh-input--error
+
oh-help--error
· 검색:
oh-search
03
카드 · 리스트 행
기본 카드 · oh-card
흰 배경 · radius 12 · shadow-card
📋
주문 조회
주문·배송 내역 통합 확인
›
✕
취소 내역
NEW
›
oh-card
· 리스트:
oh-row / oh-row__icon / __body / __title / __sub / __arrow
04
뱃지 · 칩 · 필
NEW
정보
부분취소
전체취소
배송완료
LV1
(동부) 성동
oh-badge--new / --info / --warn / --danger / --done
·
oh-pill
전체
장바구니
파트너
상품
필터 칩
oh-chip
· 선택
oh-chip--active
05
기간 탭 · 토글
3개월
6개월
1년
푸시 알림
즐겨찾기 인하
세그먼트 탭
oh-tabs / oh-tab / oh-tab--active
· 토글
oh-switch / oh-switch--on
06
바텀 내비게이션
☰
카테고리
☆
즐겨찾기
⌂
홈
⌕
검색
◉
마이페이지
oh-bnav / oh-bnav__item / oh-bnav__item--active
(5칸 그리드)