Open터미널 열기
마크다운으로 복사링크 공유

배지

상태·유형을 알려 주는 작은 알약이에요. 색은 뜻으로만 골라요.

모바일PCPleos · 개발 중Badge관련 칩 · 카드 골격

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 누르지 않는 작은 알약 - 상태·유형·신호·등락 값(size="value")·베타 표시(size="xs").

쓰지 말아야 할 때 · 대신 쓸 것#

  • 눌러서 켜고 끌 때 → 칩

여기로 합친 이름#

아래 이름들은 이 부품의 별칭·프리셋이에요. 새로 쓸 때는 Badge를 써요.

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

상태 알리기#

색은 뜻으로만 골라요. 상승은 빨강, 하락은 파랑이에요.

아이콘 붙이기#

아이콘은 글자 앞에 와요.

머리 줄에 크게 두기#

목록 행은 sm, 카드·페이지 머리는 md예요.

값 바꿔 보기#

해부도#

  1. 1

    컨테이너

    모서리 radius-md의 작은 알약이에요.

  2. 2

    아이콘

    선택이에요. 글자 앞에 와요.

  3. 3

    라벨

    두세 글자 꼬리표예요.

속성#

Tone#

여덟 가지예요. 옅은 배경 위 글자는 대비를 맞춘 -ink·-strong 색이에요.

Size#

인터페이스#

타입에서 자동으로 뽑은 표예요.

Badge#

속성기본값타입설명
tone'neutral'BadgeTone색의 뜻이에요.
size'sm''sm' | 'md' | 'xs' | 'value' | 'tag'크기예요.
icon-ReactNode라벨 앞에 놓을 아이콘이에요.
title-string마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
style-CSSPropertiessize="value"의 최소 폭처럼 숫자 칸을 맞출 때만
children*-ReactNode안에 그릴 내용이에요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

Badge#

base

상태슬롯속성값
enabledroot간격2px
줄바꿈안 함
모서리radius-md
굵기800
행간1

size=md

상태슬롯속성값
enabledroot좌우 여백8px
위아래 여백4px
글자 크기t-label-sm

size≠md=true

상태슬롯속성값
enabledroot좌우 여백6px
위아래 여백2px
글자 크기t-micro

tone=neutral

상태슬롯속성값
enabledroot배경색chip
글자색sub

tone=ink

상태슬롯속성값
enabledroot배경색ink
글자색bg

tone=brand

상태슬롯속성값
enabledroot배경색brand-soft
글자색brand-ink

tone=up

상태슬롯속성값
enabledroot배경색up-soft
글자색up-ink

tone=down

상태슬롯속성값
enabledroot배경색down-soft
글자색down-ink

tone=pos

상태슬롯속성값
enabledroot배경색pos-soft
글자색pos-strong

tone=warn

상태슬롯속성값
enabledroot배경색warn-soft
글자색warn-strong

tone=live

상태슬롯속성값
enabledroot배경색live-soft
글자색live-ink

tone=crown

상태슬롯속성값
enabledroot배경색crown-soft
글자색crown-ink

tone=outline

상태슬롯속성값
enabledroot테두리 두께1px
테두리 색line
배경색투명
글자색dim

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
Badgespan - 역할 없음
titletitle(마우스를 올리면 설명)

화면 읽기 프로그램#

  • 글자를 그대로 읽어요. 색만으로 뜻을 전하지 않게 글자에 뜻을 담아요.
  • 모든 톤이 라이트·다크 모두 4.5:1 이상이에요.

초점#

  • 초점을 받지 않아요.

가이드라인#

언제 쓰나요#

  • 카드 라벨, 단지 상태, 새 기능 표시처럼 짧은 꼬리표가 필요할 때.

이렇게 써요#

쓰는 규칙#

이렇게 써요

  • 상승=up(빨강), 하락=down(파랑), 정상=pos(초록), 주의=warn을 써요.
  • 옅은 배경 위 글자는 -ink·-strong 짝을 써요(배지가 이미 그렇게 돼 있어요).

이렇게 하지 않아요

  • 상승을 초록(pos)으로 표시하지 않아요 - 한국식 상승은 빨강이에요.
  • 배지 안에 문장을 넣지 않아요.

문구#

  • 두세 글자로 적어요("신고가").
  • 숫자를 넣을 때는 부호를 붙여요("+3.2%").

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.

Pleos개발 중

차량 앱의 ReevlBadge(공개 저장소)로 따로 구현했어요.

웹 배지와 같은 톤(neutral·ink·brand·up·down·pos·warn)을 두 배 크기로 옮겼어요.

모서리 16dp · 글자 26dp