Components / Core
Badge
v2.0
Updated: Feb 17, 2026
작품 상태, 등급, 알림 등을 표현하는 인라인 라벨 컴포넌트입니다. fill / weak 변형과 6가지 색상을 지원합니다.
사용법
Badge는 상태, 등급, 수량 등을 시각적으로 전달합니다. variant와 color를 조합하여 맥락에 맞는 라벨을 구성합니다.
<Badge variant="weak" color="red">Available</Badge>
<Badge variant="weak" color="green">인증완료</Badge>
<Badge variant="weak" color="blue">VIP</Badge>
HTML
Copy
<span class="ch-badge ch-badge--red">Available</span>
<span class="ch-badge ch-badge--green">인증완료</span>
<span class="ch-badge ch-badge--blue">VIP</span>
<!-- fill variant -->
<span class="ch-badge ch-badge--fill-red">판매중</span>
상태 (States)
Badge는 정보 전달이 주 목적이므로 hover/focus/active 상태가 제한적입니다. 클릭 가능한 Badge에만 인터랙션 상태를 적용합니다.
Variant: fill / weak
fill은 배경을 단색으로 채워 강한 시각 신호를 주고, weak는 투명 배경으로 부드럽게 표현합니다.
<!-- Fill: 강조가 필요한 핵심 상태 -->
<Badge variant="fill" color="red">판매중</Badge>
<!-- Weak: 보조 정보, 리스트 내 상태 표시 -->
<Badge variant="weak" color="red">판매중</Badge>
Color 옵션
6가지 색상으로 상태를 시각적으로 구분합니다. CHAART에서는 red, green, blue를 주로 사용합니다.
<Badge color="red">판매중</Badge>
<Badge color="green">인증완료</Badge>
<Badge color="blue">VIP</Badge>
<Badge color="orange">대기중</Badge>
<Badge color="purple">프리미엄</Badge>
<Badge color="grey">종료</Badge>
Size 옵션
xsmall부터 large까지 5단계 크기를 제공합니다. 사용 맥락에 따라 적절한 크기를 선택합니다.
<Badge size="xsmall">xsmall</Badge>
<Badge size="small">small</Badge>
<Badge size="medium">medium</Badge> {/* default */}
<Badge size="large">large</Badge>
아이콘 Badge
텍스트 왼쪽에 아이콘을 배치하여 의미를 강화합니다. icon prop에 ReactNode를 전달합니다.
<Badge color="green" icon={<CheckIcon />}>인증완료</Badge>
<Badge color="red" icon={<DiamondIcon />}>추천</Badge>
<Badge color="blue" icon={<StarIcon />}>VIP</Badge>
접근성
Badge는 보조 정보를 전달하는 요소로, 스크린 리더에서도 올바르게 읽히도록 합니다.
속성 값 설명
role"status"뱃지가 상태 정보를 나타냄을 명시합니다. aria-label"{text} 상태"색상만으로 의미를 전달하지 않도록 라벨을 제공합니다. aria-live"polite"동적으로 변경되는 상태 뱃지에 적용합니다.
사용 방법 예시
CHAART. 서비스에서 Badge가 사용되는 실제 화면입니다.
인터페이스
Badge 컴포넌트의 Props를 정의합니다.
BadgeProps
속성 필수 기본값 타입 설명
variant— weakfill | weak배경 스타일입니다. fill은 단색, weak는 투명 배경입니다. color— redred | green | blue | orange | purple | grey배지 색상입니다. size— mediumxsmall | small | medium | large배지 크기입니다. icon— — ReactNode텍스트 왼쪽에 표시할 아이콘입니다. children✓ — string배지에 표시할 텍스트입니다.
Components / Core
Button
v2.0
Updated: Feb 17, 2026
사용자 액션을 유도하는 버튼 컴포넌트입니다. fill/weak 변형, 4가지 색상, 5단계 크기, loading/disabled 상태를 지원합니다.
사용법
Button은 주요 액션과 보조 액션을 구분하여 배치합니다. variant와 color 조합으로 시각적 위계를 설정합니다.
<Button variant="fill" color="primary">작품 구매</Button>
<Button variant="weak" color="primary">찜하기</Button>
HTML
Copy
<button class="ch-btn ch-btn--primary">구매하기</button>
<button class="ch-btn ch-btn--secondary">취소</button>
<button class="ch-btn ch-btn--ghost">더 보기</button>
<!-- Small size -->
<button class="ch-btn ch-btn--primary ch-btn--sm">Small</button>
상태 (States)
Button은 7가지 인터랙션 상태를 지원합니다. 상태 전환은 --state-* 토큰 기반 opacity overlay로 구현됩니다.
/* State tokens used */
--state-hover-overlay: rgba(0,0,0,0.04) /* darken on hover */
--state-active-overlay: rgba(0,0,0,0.08) /* darken on press */
--state-focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(150,30,35,0.28)
--state-disabled-opacity: 0.38
--state-loading-opacity: 0.7
Variant: fill / weak
fill은 배경을 채워 주요 액션을 강조하고, weak는 투명 배경으로 보조 액션을 표현합니다.
Fill
Primary
Danger
Light
Dark
Weak
Primary
Danger
Light
Dark
<Button variant="fill" color="primary">Primary</Button>
<Button variant="fill" color="danger">Danger</Button>
<Button variant="fill" color="light">Light</Button>
<Button variant="fill" color="dark">Dark</Button>
<Button variant="weak" color="primary">Primary</Button>
<Button variant="weak" color="danger">Danger</Button>
Color 옵션
primary(CHAART. Red), danger(경고), light(보조), dark(강조) 4가지 색상을 제공합니다.
Color 용도 Fill Weak
primary주요 CTA, 구매, 확인
danger삭제, 해제, 경고
light보조 액션, 취소
dark강조 버튼, 다크 테마
Size 옵션
small(28px)부터 xlarge(52px)까지 5단계 크기를 제공합니다.
Small
Medium
Large
XLarge
<Button size="small">Small</Button> {/* h: 28px */}
<Button size="medium">Medium</Button> {/* h: 34px */}
<Button size="large">Large</Button> {/* h: 40px, default */}
<Button size="xlarge">XLarge</Button> {/* h: 52px */}
Display: inline / block / full
버튼의 너비 모드를 제어합니다. inline은 텍스트 너비, block은 콘텐츠 영역 너비, full은 100%입니다.
<Button display="inline">인라인 버튼</Button>
<Button display="block">블록 버튼</Button>
<Button display="full">풀 너비 버튼</Button>
Loading / Disabled 상태
비동기 처리 중에는 loading, 비활성 상태에서는 disabled를 사용합니다.
<Button loading>구매하기</Button>
<Button disabled>Disabled</Button>
{/* loading 시 클릭 이벤트가 자동으로 차단됩니다 */}
접근성
Button은 키보드 포커스, 스크린 리더, 상태 전달을 지원합니다.
속성 값 설명
role"button"기본 <button> 요소의 역할입니다. aria-disabled"true"disabled 상태에서 적용됩니다. aria-busy"true"loading 상태에서 적용됩니다. tabIndex0키보드 탭 순서에 포함됩니다.
사용 방법 예시
작품 상세 페이지의 CTA 영역에서 Button이 사용되는 모습입니다.
빨래터
박수근 · 유화 · 1954
구매 문의
♡
인터페이스
Button 컴포넌트의 Props를 정의합니다.
ButtonProps
속성 필수 기본값 타입 설명
variant— fillfill | weak버튼 스타일입니다. color— primaryprimary | danger | light | dark버튼 색상입니다. size— largesmall | medium | large | xlarge버튼 크기입니다. display— inlineinline | block | full너비 모드입니다. loading— falseboolean로딩 스피너를 표시합니다. disabled— falseboolean비활성화 상태입니다. icon— — ReactNode왼쪽에 표시할 아이콘입니다. onClick— — () => void클릭 핸들러입니다. children✓ — ReactNode버튼 내부 콘텐츠입니다.
CSS Variables
변수 기본값 설명
--btn-radius0버튼 border-radius (직각 철학 · hover 시 3px) --btn-font-weight600버튼 font-weight입니다. --btn-transition150ms ease상태 전환 트랜지션입니다.
Components / Core
Border
v2.0
Updated: Feb 17, 2026
콘텐츠 영역을 시각적으로 구분하는 구분선 컴포넌트입니다. full / padding24 / height16 세 가지 변형을 제공합니다.
사용법
Border는 리스트 아이템 사이, 섹션 사이, 콘텐츠 그룹 사이에서 시각적 구분 역할을 합니다.
<ContentArea />
<Border variant="full" />
<ContentArea />
HTML
Copy
<!-- Thin border -->
<div style="height:1px;background:var(--border)"></div>
<!-- Thick divider -->
<div style="height:8px;background:var(--alpha-4)"></div>
Variant: full
좌우 여백 없이 화면 전체 너비를 가로지르는 구분선입니다. 대섹션 간 구분에 사용합니다.
<Border variant="full" />
{/* width: 100%, height: 1px, margin: 0 */}
Variant: padding24
좌우 24px 여백을 두어 콘텐츠 영역과 정렬되는 구분선입니다. 리스트 아이템 사이에 사용합니다.
<Border variant="padding24" />
{/* width: calc(100% - 48px), margin: 0 24px */}
Variant: height16
16px 높이의 두꺼운 영역 구분선입니다. 섹션 간 강한 시각적 분리에 사용합니다.
<Border variant="height16" />
{/* width: 100%, height: 16px, background: bg-secondary */}
접근성
Border는 시각적 구분 역할만 수행하며, 의미적 구분에는 <section>을 사용합니다.
속성 값 설명
role"separator"구분선의 역할을 명시합니다. aria-hidden"true"순수 장식 요소일 때 스크린 리더에서 무시합니다.
사용 방법 예시
작품 상세 페이지에서 Border로 섹션을 구분하는 모습입니다.
인터페이스
Border 컴포넌트의 Props를 정의합니다.
BorderProps
속성 필수 기본값 타입 설명
variant— fullfull | padding24 | height16구분선 변형입니다. color— borderstring (CSS token)구분선 색상입니다.
Components / Core
Icon Button
v1.0
Updated: Feb 17, 2026
아이콘만으로 구성된 버튼 컴포넌트입니다. 좋아요, 공유, 북마크, 닫기 등 단일 액션에 사용되며, 텍스트 없이 시각적 아이콘으로 기능을 전달합니다.
사용법
기본 아이콘 버튼은 medium 사이즈, ghost 변형으로 렌더링됩니다. 아이콘은 children 또는 icon prop으로 전달합니다.
♥
⤴
✕
<IconButton icon="heart" aria-label="좋아요" />
<IconButton icon="share" aria-label="공유" />
<IconButton icon="close" aria-label="닫기" />
HTML
Copy
<button style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--alpha-12);background:none;cursor:pointer;transition:all var(--dur-fast)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
사이즈
세 가지 사이즈를 지원합니다. 사용 맥락에 따라 적절한 크기를 선택하세요.
<IconButton size="small" icon="heart" aria-label="좋아요" />
<IconButton size="medium" icon="heart" aria-label="좋아요" />
<IconButton size="large" icon="heart" aria-label="좋아요" />
변형(Variant)
fill, ghost, outline 세 가지 스타일 변형을 제공합니다. 시각적 강조 수준에 따라 선택합니다.
<IconButton variant="fill" icon="heart" aria-label="좋아요" />
<IconButton variant="ghost" icon="heart" aria-label="좋아요" />
<IconButton variant="outline" icon="heart" aria-label="좋아요" />
접근성
속성 값 설명
rolebutton버튼 역할을 명시합니다 aria-labelstring아이콘만 있으므로 반드시 텍스트 레이블을 제공해야 합니다 aria-pressedboolean토글형 버튼(좋아요 등)에서 현재 상태를 전달합니다 tabindex0키보드 포커스가 가능하며 Tab 순서에 포함됩니다
사용 방법 예시
작품 이미지 영역
김환기 · 무제 05-IV-71 #200
유화 · 캔버스 · 1971
♥
⤴
☆
인터페이스
IconButtonProps
속성 필수 기본값 타입 설명
icon✓ — string | ReactNode표시할 아이콘 이름 또는 커스텀 아이콘 요소 size"medium""small" | "medium" | "large"버튼 크기 (32 / 40 / 48px) variant"ghost""fill" | "ghost" | "outline"버튼 스타일 변형 color"default""default" | "brand" | "danger"아이콘 및 배경 색상 테마 disabledfalseboolean비활성 상태 여부 aria-label✓ — string스크린 리더용 접근성 텍스트 onClick— () => void클릭 이벤트 핸들러
상태 (States)
IconButton의 인터랙션 상태입니다.
Components / Core
Text Button
v1.0
Updated: Feb 17, 2026
텍스트만으로 구성된 가벼운 버튼 컴포넌트입니다. 밑줄이나 색상으로 클릭 가능한 텍스트를 구분하며, 보조 액션이나 링크형 버튼으로 활용됩니다.
사용법
더보기
취소
전체보기 →
<TextButton
onClick={() => loadMore()}
underline
>
더보기
</TextButton>
HTML
Copy
<a href="#" style="font-size:var(--text-sm);color:var(--red-brand);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color var(--dur-fast)">Text Link →</a>
크기와 색상
크기
Small 텍스트
Medium 텍스트
Large 텍스트
색상
Primary
Secondary
Muted
접근성
속성 값 설명
rolebutton버튼 역할을 스크린 리더에 전달합니다 aria-disabledtrue | false비활성화 상태를 전달합니다 tabindex0키보드 탐색으로 포커스 가능합니다 키보드 Enter / Space 엔터 또는 스페이스바로 클릭합니다 포커스 아웃라인 표시 포커스 시 시각적 인디케이터가 표시됩니다
인터페이스
TextButtonProps
속성 필수 기본값 타입 설명
children✓ — ReactNode버튼에 표시할 텍스트 size"md""sm" | "md" | "lg"텍스트 크기 color"primary""primary" | "secondary" | "muted"텍스트 색상 underlinefalseboolean밑줄 표시 여부 onClick— () => void클릭 시 호출되는 콜백 disabledfalseboolean비활성화 상태
크기 (Size)
4단계 사이즈 스케일을 지원합니다. 기본값은 md입니다.
상태 (States)
TextButton의 인터랙션 상태입니다.