Pill

진행 중인 상태를 화면 위에 띄워 두는 알약 모양 표면입니다. 녹음 타이머나 아직 돌고 있는 빌드처럼 계속 갱신되는 정보에 씁니다.

import { Pill } from 'neba';

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

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	그림자 깊이. 페이지 위에 떠 있는 표면이라 기본값이 2입니다
startIcon	ReactNode	—	앞자리, 글리프, 아바타, 상태 점, 사진. 정사각형 상자를 받아 원형으로 잘리므로 img도 icon과 똑같이 들어갑니다
title	ReactNode	—	가운데의 제목, 지금 이 pill이 무엇에 관한 것인지. 좌우로 넉넉한 여백을 두고 가운데 정렬됩니다
description	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>의 native 속성은 그대로 전달됩니다. 예외는 title 하나로, 여기서는 브라우저의 tooltip이 아니라 pill의 제목입니다.

줄은 세 부분으로 나뉩니다. 앞쪽 가장자리의 startIcon, 뒤쪽의 endIcon, 그리고 그 사이의 가운데 영역입니다. 가운데에는 title, description, children이 들어가며 좌우로 넉넉한 여백을 두고 가운데 정렬됩니다.

color의 기본값은 secondary이고 elevation의 기본값은 2입니다. 화면 위에 떠 있는 것이 전제이므로 그림자가 기본으로 붙습니다.

예시

title과 description

title은 이 pill이 무엇에 관한 것인지를 말하는 줄이고, description은 그 아래 줄입니다. 둘 다 선택입니다. 제목만 있으면 줄은 한 줄 높이를 유지해 온전한 stadium 모양이 되고, description을 더하면 같은 모서리를 가진 둥근 사각형으로 자랍니다.

import { Pill } from 'neba';

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

/**
 * A title alone keeps the row one line tall, so the lozenge stays a stadium.
 * Adding a description grows it into a rounded rectangle with the same corner.
 */
export default function PillText() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Pill startIcon={<DotIcon />} color="success" title="All systems normal" />

      <Pill
        startIcon={<DotIcon />}
        color="warning"
        title="Degraded"
        description="EU-west is slow"
      />
    </div>
  );
}

startIcon과 endIcon

앞자리는 원형으로 잘린 정사각형 상자입니다. <img>를 넣으면 아바타처럼 상자를 채우고 잘립니다. 뒷자리는 눌리는 영역 바깥에 있으므로 수치 표시나 컨트롤 자체를 넣을 수 있습니다.

import { IconButton, Pill } from 'neba';

function PauseIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M6 3.5v9M10 3.5v9" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
    </svg>
  );
}

/**
 * The leading slot takes an image as readily as a glyph — it is a square box
 * clipped to a circle, and the image fills and crops it. The trailing slot is
 * outside the pressable area, so a control can live there.
 */
export default function PillSlots() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Pill
        variant="outline"
        color="primary"
        startIcon={<img src="/logo-32.png" alt="" />}
        title="Neba UI"
        description="1.0.0 published"
      />

      <Pill
        color="info"
        title="Deploying"
        description="build 8f2c1a"
        endIcon={
          <IconButton icon={<PauseIcon />} label="Pause" size="xs" variant="text" color="info" />
        }
      />
    </div>
  );
}

details와 expanded

details를 주면 알약 아래로 두 번째 영역이 자랍니다. expanded로 controlled, onClick으로 토글 동작을 붙일 수 있습니다. 펼침은 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"
        title="KE081 → ICN"
        description="Boards in 25 minutes"
        expanded={expanded}
        onClick={() => setExpanded(!expanded)}
        details={
          <div className="flex flex-col gap-1">
            <Typography level="caption">Gate B14 · seat 12A</Typography>
            <Typography level="caption">On time</Typography>
          </div>
        }
      />

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

접혀 있는 동안 상세 영역은 inert입니다. 높이가 0인 요소에도 focus는 들어갈 수 있으므로, aria-hidden만으로는 키보드 사용자가 보이지 않는 영역으로 tab해 들어가게 됩니다.

variant와 size

색에 관해서 Pill은 컨테이너가 아니라 컨트롤입니다. Button이나 Chip처럼 표면 자체가 색을 갖습니다.

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 />}
            title={variant}
          />
        ))}
      </div>

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

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

position과 side

Toolbar와 같은 어휘를 씁니다. fixed는 viewport에 고정하고 가로로 가운데 정렬합니다. auto margin으로 정렬하므로 RTL에서도 가운데에 놓입니다.

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

이럴 때는 다른 컴포넌트를

• 콘텐츠 흐름 안의 토큰(태그, 필터, 상태)이라면 Chip을 쓰세요.
• 페이지 상단을 가로지르는 컨트롤 줄이라면 Toolbar를 쓰세요.
• 사용자가 기다려야 하고 치울 수 없다면 Overlay, 치울 수 있다면 Toast를 쓰세요.