Pill

살아 있는 정보 한 줌을 담고 떠 있는 로젠지 — 녹음 타이머, 탑승 게이트, 아직 돌고 있는 빌드.

import { Pill } from 'neba';

<Pill startIcon={<DotIcon />} color="danger">
  녹음 중
</Pill>;

자리는 셋입니다: 앞의 글리프, 가운데, 뒤의 글리프. onClick을 주면 가운데가 진짜 버튼이 되고, details를 주면 아래로 자라 두 번째 절반이 생깁니다.

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'solid'	표면의 무게. *컨트롤*의 방식대로 표면 자체가 색을 받습니다 — Button, Chip과 같습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	높이와 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'secondary'	의미론적 색 역할. 여기서만 기본이 secondary입니다 — 이 모양이 흉내 내는 물건이 거의 중립인 검정이기 때문입니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	2	그림자 깊이. 다른 모든 것이 0인데 여기만 2인 것은 일관성이 깨진 것이 아닙니다 — Pill은 페이지의 일부가 아닌 것으로 정의되고, 자기가 떠 있는 내용 위에 납작하게 붙은 로젠지는 실수처럼 보입니다
startIcon	ReactNode	—	앞자리 — 글리프, 아바타, 상태 점, 작은 이미지
endIcon	ReactNode	—	뒷자리. 눌리는 영역 바깥이라 그 자체가 컨트롤이어도 됩니다
details	ReactNode	—	expanded일 때 드러나는 나머지 절반. 다른 모양으로 바뀌는 것이 아니라 아래로 자랍니다 — 하나의 물건이 더 말하는 것, 여기서 빌려 온 것이 그것입니다
expanded	boolean	false	details가 보이는지
position공통	'static' | 'sticky' | 'fixed'	'static'	페이지 스크롤 안에서 어떻게 앉는지. fixed는 뷰포트에 고정하고 가로로 가운데에 둡니다 — 이 모양이 존재하는 이유가 그 배치입니다
side공통	'top' | 'bottom'	'top'	static이 아닐 때 어느 가장자리에 붙는지
onClick	MouseEventHandler	—	주면 가운데 줄이 진짜 button이 됩니다. endIcon은 그 바깥에 남습니다 — button 안의 button은 브라우저가 파싱 때 풀어 버리는 마크업입니다
children	ReactNode	—	가운데 — 한 줄, 작은 읽을거리 한둘

<div>의 네이티브 속성은 그대로 전달됩니다.

예시

접힘과 펼침

이 짝이 여기서 빌려 온 아이디어 전부입니다. 알약은 측정된 높이를 애니메이션해서 두 번째 절반으로 자랍니다 — Accordion의 패널과 똑같은 방식이고, 이유도 같습니다: 아무것도 변형되지 않으므로 그 과정에서 글자가 리샘플링되는 일이 없습니다.

import { useState } from 'react';
import { Pill, Typography } from 'neba';

function PlaneIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M2 8.5 14 3l-3.5 10-2.2-4.2L2 8.5Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/**
 * The compact/expanded pair, which is the whole idea being borrowed. The pill
 * grows into its second half by animating a measured height — nothing is
 * transformed, so no text is ever resampled on the way.
 */
export default function PillExpandable() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="flex flex-col items-start gap-3">
      <Pill
        startIcon={<PlaneIcon />}
        color="info"
        expanded={expanded}
        onClick={() => setExpanded(!expanded)}
        details={
          <div className="flex flex-col gap-1">
            <Typography level="caption">Gate B14 · boards in 25 minutes</Typography>
            <Typography level="caption">Seat 12A · on time</Typography>
          </div>
        }
      >
        KE081 → ICN
      </Pill>

      <Typography level="caption">Press the pill.</Typography>
    </div>
  );
}

닫혀 있는 동안 상세 영역은 단순히 aria-hidden이 아니라 inert입니다. 높이가 0인 상자는 그 안의 내용에 여전히 완벽하게 포커스가 가는 상자이고, aria-hidden만 걸어 두면 키보드 독자가 자기 스크린 리더로부터 "그런 것은 없다"고 들은 곳으로 탭해 들어가게 됩니다.

무게와 크기

색에 관한 한 Pill은 컨테이너가 아니라 컨트롤입니다. 색이 칠해지는 대상이 표면 자신이라는 뜻이고, Button이나 Chip과 똑같습니다. 여기서 color의 기본값이 primary가 아니라 secondary인 것은, 이 모양이 흉내 내는 물건이 거의 중립인 검정이기 때문입니다.

import { Pill, Typography } from 'neba';

function DotIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="4" fill="currentColor" />
    </svg>
  );
}

const VARIANTS = ['solid', 'outline', 'text'] as const;
const SIZES = ['sm', 'md', 'lg'] as const;

/**
 * A Pill is a *control* as far as colour goes, not a container: its surface is
 * the thing being coloured, exactly as on a Button or a Chip.
 */
export default function PillVariants() {
  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-center gap-3">
        {VARIANTS.map((variant) => (
          <Pill key={variant} variant={variant} color="primary" startIcon={<DotIcon />}>
            {variant}
          </Pill>
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        {SIZES.map((size) => (
          <Pill key={size} size={size} color="success" startIcon={<DotIcon />}>
            size {size}
          </Pill>
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Pill density="compact" color="secondary" startIcon={<DotIcon />}>
          compact
        </Pill>
        <Pill elevation={0} color="secondary" startIcon={<DotIcon />}>
          elevation 0
        </Pill>
        <Typography level="caption">Density is padding; elevation is how far it floats.</Typography>
      </div>
    </div>
  );
}

고정

position과 side는 Toolbar가 쓰는 것과 같은 어휘입니다. fixed는 뷰포트에 고정하고 가로로 가운데에 두는데, 이 모양이 존재하는 이유가 그 배치입니다 — 그리고 자기 폭의 절반만큼 밀어서가 아니라 auto 마진으로 가운데에 두므로 RTL에서도 가운데에 있습니다.

<Pill position="fixed" side="top" startIcon={<BuildIcon />} color="info">
  빌드 중 — 7개 중 2개
</Pill>

둥근 모양에 대하여

라이브러리의 다른 모든 컨트롤은 알약이 되는 50% 반지름 바로 앞에서 붙잡혀 있습니다. 위아래 가장자리를 따라 남는 평평한 구간이야말로 모서리를 잘라 낸 시트로 읽히게 하는 것이기 때문입니다. 이것은 그 규칙이 겨냥해서 그어진 예외이고, 규칙이 성립하는 이유와 같은 이유로 성립합니다 — Pill은 페이지 위에 놓인 시트가 아닙니다. 페이지 위에 떠 있는 물건이고, 페이지 위에 떠 있는 물건은 페이지와 같은 재료에서 잘려 나온 것처럼 보이면 안 됩니다.

elevation의 기본값이 다른 모든 것의 0이 아니라 2인 것도 같은 이유입니다. 일관성이 깨진 것이 아닙니다 — 자기가 떠 있는 내용 위에 납작하게 붙은 로젠지는 실수처럼 보입니다.

다른 것을 써야 할 때

• 내용의 흐름 안에 있는 토큰 — 태그, 필터, 상태 — 은 Chip입니다.
• 페이지 위쪽을 가로지르는 컨트롤 줄은 Toolbar입니다.
• 페이지가 기다리는 중이고 독자가 치울 수 없는 것은 Overlay, 치울 수 있는 것은 Toast입니다.