Badge

다른 것의 모서리에 걸리는 작은 표식입니다. 받은 편지함 아이콘 위의 읽지 않은 메일, 아바타 위의 상태 점, 탭 위의 개수.

import { Badge, Button } from 'neba';

<Badge content={4} label="읽지 않은 알림 4개">
  <Button startIcon={<BellIcon />} />
</Badge>

<Badge dot color="success" overlap="circle">
  <Avatar />
</Badge>;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'solid'	표면의 무게. 채움 / 하이라인 / 없음
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	표식의 크기. 컨트롤 사다리와 별개입니다 — 배지는 무언가의 모서리에 걸리는 것이라 줄을 맞출 상대가 없습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	숫자 좌우의 여백만 바꿉니다
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
content	ReactNode	—	표식이 말하는 것. 보통 숫자, 가끔 단어. 없으면 점이 됩니다
max	number	99	숫자 content의 상한. 넘으면 99+가 됩니다. 단어는 자르지 않습니다
dot	boolean	false	content가 있어도 점으로 그립니다. 숫자는 스크린 리더에만 남습니다
showZero	boolean	false	0도 보여 줍니다. 기본이 꺼짐인 이유는 읽지 않은 메시지 0개는 소식이 아니기 때문입니다
invisible	boolean	false	자리는 지킨 채 숨깁니다. 다시 나타나도 주변이 움직이지 않습니다
placement공통	'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'	'top-end'	어느 모서리에 붙을지. start/end라서 쓰기 방향을 따라 뒤집힙니다
overlap	'square' | 'circle'	'square'	아래에 있는 것의 모양. 원의 모서리는 사각형보다 중심에서 멀기 때문에 파고드는 깊이가 다릅니다
label	string	—	스크린 리더가 숫자 대신 읽을 문장. 종 옆의 "3"은 아무 뜻도 없습니다
children	ReactNode	—	표식이 붙을 대상. 없으면 인라인으로 놓이는 독립 표식이 됩니다

예시

Variant와 색

import { Badge, Button } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function BadgeVariants() {
  return (
    <div className="flex flex-col gap-4">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-5">
          {COLORS.map((color) => (
            <Badge key={color} variant={variant} color={color} content={8}>
              <Button variant="outline" color="secondary" size="sm">
                {color}
              </Button>
            </Badge>
          ))}
        </div>
      ))}
    </div>
  );
}

무엇을 말하는가

max를 넘긴 숫자는 커지는 대신 99+가 됩니다. 단어는 자르지 않습니다 — 배지는 단어를 어떻게 줄여야 할지 알 수 없기 때문입니다.

content가 0이면 기본적으로 아무것도 그리지 않습니다. 읽지 않은 메시지 0개는 소식이 아니고, 사라지지 않는 배지는 곧 아무 뜻도 없는 배지가 됩니다. 셀 것은 없지만 알릴 것은 있을 때가 dot입니다.

import { Badge, Button } from 'neba';

export default function BadgeContent() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Badge content={7}>
        <Button variant="outline" color="secondary">
          Seven
        </Button>
      </Badge>

      {/* Past `max`, and the badge says so rather than growing. */}
      <Badge content={1204}>
        <Button variant="outline" color="secondary">
          Capped
        </Button>
      </Badge>

      <Badge content={1204} max={999}>
        <Button variant="outline" color="secondary">
          Higher cap
        </Button>
      </Badge>

      {/* A count of nothing is not news, so it does not show up at all. */}
      <Badge content={0}>
        <Button variant="outline" color="secondary">
          Zero
        </Button>
      </Badge>

      <Badge content={0} showZero color="secondary">
        <Button variant="outline" color="secondary">
          Zero, shown
        </Button>
      </Badge>

      {/* Nothing to count, but something to report. */}
      <Badge dot color="danger">
        <Button variant="outline" color="secondary">
          Dot
        </Button>
      </Badge>
    </div>
  );
}

어느 모서리에, 얼마나 파고들지

placement는 top/bottom과 start/end를 합친 한 단어입니다. 모서리는 하나의 결정이고, 두 개의 prop으로 쪼개면 { vertical: 'left' } 같은 표기가 가능해집니다. start/end이므로 쓰기 방향을 따라 뒤집힙니다.

overlap은 아래 있는 것의 모양입니다. 원의 모서리는 사각형의 모서리보다 중심에서 멀기 때문에, 아이콘 버튼에서 맞던 배지가 아바타에서는 떠 보입니다.

import { Badge, Button } from 'neba';

const CORNERS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'] as const;

export default function BadgePlacement() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center gap-6">
        {CORNERS.map((placement) => (
          <Badge key={placement} placement={placement} content={3}>
            <Button variant="outline" color="secondary" size="lg">
              {placement}
            </Button>
          </Badge>
        ))}
      </div>

      {/* A circle's corner is further from its centre than a square's, so the
          badge has to tuck in further or it floats off the edge. */}
      <div className="flex flex-wrap items-center gap-6">
        {(['square', 'circle'] as const).map((overlap) => (
          <div key={overlap} className="flex items-center gap-3">
            <Badge overlap={overlap} content={3} color="danger">
              <span className="flex size-10 items-center justify-center rounded-full bg-(--n-soft-press) text-[0.8125rem] font-semibold text-(--neba-fg)">
                JD
              </span>
            </Badge>
            <span className="text-[0.75rem] text-(--neba-muted-fg)">overlap="{overlap}"</span>
          </div>
        ))}
      </div>
    </div>
  );
}

크기

import { Badge, Button } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function BadgeSizes() {
  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-center gap-6">
        {SIZES.map((size) => (
          <Badge key={size} size={size} content={12}>
            <Button size={size} variant="outline" color="secondary">
              {size}
            </Button>
          </Badge>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-6">
        {SIZES.map((size) => (
          <Badge key={size} size={size} dot color="success">
            <Button size={size} variant="outline" color="secondary">
              {size}
            </Button>
          </Badge>
        ))}
      </div>
    </div>
  );
}

배지는 알약이어도 되는 유일한 것입니다

18px 높이에서 --neba-radius-xs(10px)는 이미 알약이 되는 절반 지점을 넘습니다. 그래서 Badge는 라이브러리에서 유일하게 rounded-full을 씁니다.

이것은 디자인 언어의 구멍이 아니라 그 언어가 스스로 지정한 예외입니다. 시트 위아래 가장자리의 평평한 구간은 "이것은 잘린 표면이다"라고 말하기 위한 것입니다. 배지는 표면이 아닙니다. 표면 위에 놓인 자국이고, 자국에는 자를 가장자리가 없습니다 — 옆 사람의 영역을 침범하는 유일한 컴포넌트인 것도 같은 이유입니다.

transform은 쓰지 않습니다

다른 라이브러리는 모서리 배치에 translate(50%, -50%)를 씁니다. 여기서는 자기 높이의 절반만큼 음수 마진을 줍니다. 두 줄이 더 들지만 transform 금지 규칙은 절대적이고, 그 두 줄보다 값어치가 있습니다.

부수 효과도 나쁘지 않습니다. 세로로는 정확히 절반이 걸치고, 가로로는 폭이 아닌 높이의 절반만큼 당겨지므로 99+ 같은 넓은 배지가 조금 덜 튀어나옵니다 — 어차피 그쪽이 보기 좋습니다.

접근성

content={3}이 종 아이콘 옆에 있으면 스크린 리더에는 그저 "3"입니다. label은 그 자리를 문장으로 바꿉니다.

<Badge content={3} label="읽지 않은 알림 3개">
  <Button startIcon={<BellIcon />} aria-label="알림" />
</Badge>

dot일 때도 숫자는 DOM에 남습니다 — 잘려서 보이지 않을 뿐입니다. 조용한 모서리가 침묵하는 모서리는 아니어야 하기 때문입니다. 반대로 invisible이거나 content가 비어 표식이 없을 때는 아무것도 남기지 않습니다: 없는 표식은 할 말도 없고, 잘린 상자에 남은 글자는 페이지 내 검색이 여전히 찾아냅니다.