Caption

Data Display

본문·제목에 곁들이는 메타데이터 캡션.

국어

3단원

2026.08.18

Usage

제목이나 본문 옆에 작성자·날짜·분류 같은 짧은 메타데이터를 묶어 표시할 때 사용한다.

import

import { Caption } from '@mildang/design-system/Caption';

Caption 하나만 가져오면 Caption.Item 를 그 아래에서 쓸 수 있다.

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

Anatomy

tsx

import { Caption } from '@mildang/design-system/Caption';

export default function Example() {
  return (
    <Caption>
      <CaptionItem />
    </Caption>
  );
}

부품

필수 여부

반복

위치

Caption

필수

CaptionItem

필수

여러 개 가능

Caption 안에 항목마다 둔다.

Caption 안에 `Caption.Item`을 하나 이상 배치한다.

API Reference

Caption Props

Prop

Type

Default

children

ReactNode

지정 안 함

className

string

지정 안 함

size

"sm" | "md" | "lg" | "xl"

Caption

캡션 항목을 가로로 배치하고 구분자를 삽입하는 루트다.

공개 Props 없음

CaptionItem

하나의 메타데이터 항목이다. 공개 사용법은 `Caption.Item`이다.

Prop

Type

Default

avatar

ReactNode

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

count

number

지정 안 함

countPosition

"leading" | "trailing"

trailing

icon

ReactNode

지정 안 함

size

"sm" | "md" | "lg" | "xl"

예제

기본 사용

과목·단원·날짜 세 항목을 나열한 최소 형태다. 항목 사이 점 구분자는 Caption 이 자동으로 끼워 넣는다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Caption } from '@mildang/design-system/Caption';

const STORY_DEFAULT_ARGS = { ...({ size: 'md' }), ...({}) } as ComponentProps<typeof Caption>;

const CaptionDefaultExampleRender = (args: ComponentProps<typeof Caption>) => (
    <Caption {...args}>
      <Caption.Item>국어</Caption.Item>
      <Caption.Item>3단원</Caption.Item>
      <Caption.Item>2026.08.18</Caption.Item>
    </Caption>
  );

export default function CaptionDefaultExample(props: Partial<ComponentProps<typeof Caption>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Caption>;
  return CaptionDefaultExampleRender(mergedProps);
}

크기

sm부터 xl까지 네 크기를 나란히 비교한다. count 로 숫자 배지를 붙인 항목도 함께 보여준다.

코드

import { VStack } from '@mildang/styled-system/jsx';
import { Caption } from '@mildang/design-system/Caption';
import Book from '@mildang/icons/react/book';
import { Avatar } from '@mildang/design-system/Avatar';
import { CaptionVariant } from '@mildang/styled-system/recipes';

const sizes = ['sm', 'md', 'lg', 'xl'] as CaptionVariant['size'][];

const CaptionSizesExample = () => (
    <VStack gap="16" alignItems="flex-start">
      {sizes.map((size) => (
        <Caption key={size} size={size}>
          <Caption.Item icon={<Book />}>3단원</Caption.Item>
          <Caption.Item count={2}>댓글</Caption.Item>
          <Caption.Item avatar={<Avatar size="xs" initial="김선생" badge />}>김선생</Caption.Item>
        </Caption>
      ))}
    </VStack>
  );

export default CaptionSizesExample;

SingleItem

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Caption } from '@mildang/design-system/Caption';

const STORY_DEFAULT_ARGS = { ...({ size: 'md' }), ...({}) } as ComponentProps<typeof Caption>;

const CaptionSingleItemExampleRender = (args: ComponentProps<typeof Caption>) => (
    <Caption {...args}>
      <Caption.Item>조회수 128</Caption.Item>
    </Caption>
  );

export default function CaptionSingleItemExample(props: Partial<ComponentProps<typeof Caption>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Caption>;
  return CaptionSingleItemExampleRender(mergedProps);
}

WithIconCountAvatar

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Caption } from '@mildang/design-system/Caption';
import Book from '@mildang/icons/react/book';
import { Avatar } from '@mildang/design-system/Avatar';

const STORY_DEFAULT_ARGS = { ...({ size: 'md' }), ...({}) } as ComponentProps<typeof Caption>;

const CaptionWithIconCountAvatarExampleRender = (args: ComponentProps<typeof Caption>) => (
    <Caption {...args}>
      <Caption.Item icon={<Book />}>3단원</Caption.Item>
      <Caption.Item count={2}>댓글</Caption.Item>
      <Caption.Item avatar={<Avatar size="xs" initial="김" />}>김선생</Caption.Item>
    </Caption>
  );

export default function CaptionWithIconCountAvatarExample(props: Partial<ComponentProps<typeof Caption>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Caption>;
  return CaptionWithIconCountAvatarExampleRender(mergedProps);
}

CountPosition

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Caption } from '@mildang/design-system/Caption';
import { VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({ size: 'md' }), ...({}) } as ComponentProps<typeof Caption>;

const CaptionCountPositionExampleRender = (args: ComponentProps<typeof Caption>) => (
    <VStack gap="8" alignItems="flex-start">
      <Caption {...args}>
        <Caption.Item count={2}>댓글</Caption.Item>
        <Caption.Item count={128}>조회수</Caption.Item>
      </Caption>
      <Caption {...args}>
        <Caption.Item count={2} countPosition="leading">
          댓글
        </Caption.Item>
        <Caption.Item count={128} countPosition="leading">
          조회수
        </Caption.Item>
      </Caption>
    </VStack>
  );

export default function CaptionCountPositionExample(props: Partial<ComponentProps<typeof Caption>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Caption>;
  return CaptionCountPositionExampleRender(mergedProps);
}

Basic

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Caption } from '@mildang/design-system/Caption';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    children: '수학 1단원',
    count: 3,
  }) } as ComponentProps<typeof Caption.Item>;

export default function CaptionItemBasicExample(props: Partial<ComponentProps<typeof Caption.Item>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Caption.Item>;
  return <Caption.Item {...mergedProps} />;
}