Sticker

Navigation

색 배경 위에 아이콘을 얹는 장식 배지.

Usage

상호작용 없이 아이콘을 색상 면 위에 장식적으로 강조할 때 사용한다.

import

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

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

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

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

API Reference

Sticker Props

Prop

Type

Default

지정 안 함

className

string

지정 안 함

color

지정 안 함

icon

ReactNode

지정 안 함

size

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

variant

"circle" | "rounded"

circle

예제

모양

circle 은 프로필·알림처럼 홀로 뜨는 자리, rounded 는 목록 앞머리처럼 사각 카드와 맞물리는 자리입니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import FaceSmile from '@mildang/icons/react/face-smile';
import { Sticker } from '@mildang/design-system/Sticker';
import { HStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({
    icon: <FaceSmile />,
  }), ...({}) } as ComponentProps<typeof Sticker>;

const StickerVariantsExampleRender = (args: ComponentProps<typeof Sticker>) => (
    <HStack alignItems="center">
      <Sticker {...args} size="xl" variant="circle" />
      <Sticker {...args} size="xl" variant="rounded" />
    </HStack>
  );

export default function StickerVariantsExample(props: Partial<ComponentProps<typeof Sticker>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Sticker>;
  return StickerVariantsExampleRender(mergedProps);
}

크기

면과 아이콘이 함께 커지는 5단계를 비교합니다. 아이콘 크기를 따로 주면 면 안에서 중심이 어긋납니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import FaceSmile from '@mildang/icons/react/face-smile';
import { Sticker } from '@mildang/design-system/Sticker';
import { HStack, VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({
    icon: <FaceSmile />,
  }), ...({}) } as ComponentProps<typeof Sticker>;

const StickerSizesExampleRender = (args: ComponentProps<typeof Sticker>) => (
    <VStack alignItems="flex-start" gap="16">
      <HStack alignItems="center">
        <Sticker {...args} size="xs" variant="circle" />
        <Sticker {...args} size="sm" variant="circle" />
        <Sticker {...args} size="md" variant="circle" />
        <Sticker {...args} size="lg" variant="circle" />
        <Sticker {...args} size="xl" variant="circle" />
      </HStack>
      <HStack alignItems="center">
        <Sticker {...args} size="xs" variant="rounded" />
        <Sticker {...args} size="sm" variant="rounded" />
        <Sticker {...args} size="md" variant="rounded" />
        <Sticker {...args} size="lg" variant="rounded" />
        <Sticker {...args} size="xl" variant="rounded" />
      </HStack>
    </VStack>
  );

export default function StickerSizesExample(props: Partial<ComponentProps<typeof Sticker>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Sticker>;
  return StickerSizesExampleRender(mergedProps);
}

Colors

코드

Open in Playground

import type { ComponentProps } from 'react';
import FaceSmile from '@mildang/icons/react/face-smile';
import { Sticker } from '@mildang/design-system/Sticker';
import { HStack, VStack } from '@mildang/styled-system/jsx';
import { type ReactNode } from 'react';
import { css } from '@mildang/styled-system/css';

// 스티커 아래에 토큰명을 캡션으로 붙이는 데모 전용 래퍼.
// label=배경(bg) 토큰. sub=아이콘색이 bg role과 다를 때만 아랫줄에 흐리게 표기(긴 라벨 방지).
const Swatch = ({ label, sub, children }: { label: string; sub?: string; children: ReactNode }) => (
  <VStack gap="6" alignItems="center">
    {children}
    <VStack gap="0" alignItems="center">
      <span className={css({ textStyle: 'caption-sm', color: 'neutral.text.low', whiteSpace: 'nowrap' })}>
        {label}
      </span>
      {sub && (
        <span className={css({ textStyle: 'caption-sm', color: 'neutral.text.lowest', whiteSpace: 'nowrap' })}>
          {sub}
        </span>
      )}
    </VStack>
  </VStack>
);

const STORY_DEFAULT_ARGS = { ...({
    icon: <FaceSmile />,
  }), ...({}) } as ComponentProps<typeof Sticker>;

const StickerColorsExampleRender = (args: ComponentProps<typeof Sticker>) => (
    <VStack alignItems="flex-start" gap="20">
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="neutral.surface.low">
          <Sticker {...args} size="xl" bg="neutral.surface.low" color="neutral.icon.base" />
        </Swatch>
        <Swatch label="neutral.surface.high">
          <Sticker {...args} size="xl" bg="neutral.surface.high" color="neutral.icon.base" />
        </Swatch>
        <Swatch label="neutral.surface.highest">
          <Sticker {...args} size="xl" bg="neutral.surface.highest" color="neutral.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="primary.surface.base">
          <Sticker {...args} size="xl" bg="primary.surface.base" color="primary.icon.base" />
        </Swatch>
        <Swatch label="primary.surface.high">
          <Sticker {...args} size="xl" bg="primary.surface.high" color="primary.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="brand.surface.low">
          <Sticker {...args} size="xl" bg="brand.surface.low" color="brand.icon.base" />
        </Swatch>
        <Swatch label="brand.surface.base">
          <Sticker {...args} size="xl" bg="brand.surface.base" color="brand.icon.base" />
        </Swatch>
        <Swatch label="brand.surface.high">
          <Sticker {...args} size="xl" bg="brand.surface.high" color="brand.icon.base" />
        </Swatch>
        <Swatch label="brand.surface.highest">
          <Sticker {...args} size="xl" bg="brand.surface.highest" color="brand.icon.base" />
        </Swatch>
        <Swatch label="brand.surface.highest" sub="+ inverse.icon.base">
          <Sticker {...args} size="xl" bg="brand.surface.highest" color="inverse.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="positive.surface.low">
          <Sticker {...args} size="xl" bg="positive.surface.low" color="positive.icon.base" />
        </Swatch>
        <Swatch label="positive.surface.base">
          <Sticker {...args} size="xl" bg="positive.surface.base" color="positive.icon.base" />
        </Swatch>
        <Swatch label="positive.surface.high">
          <Sticker {...args} size="xl" bg="positive.surface.high" color="positive.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="critical.surface.base">
          <Sticker {...args} size="xl" bg="critical.surface.base" color="critical.icon.base" />
        </Swatch>
        <Swatch label="critical.surface.high">
          <Sticker {...args} size="xl" bg="critical.surface.high" color="critical.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="warning.surface.base">
          <Sticker {...args} size="xl" bg="warning.surface.base" color="warning.icon.base" />
        </Swatch>
        <Swatch label="warning.surface.high">
          <Sticker {...args} size="xl" bg="warning.surface.high" color="warning.icon.base" />
        </Swatch>
      </HStack>
      <HStack alignItems="flex-start" gap="16">
        <Swatch label="info.surface.base">
          <Sticker {...args} size="xl" bg="info.surface.base" color="info.icon.base" />
        </Swatch>
        <Swatch label="info.surface.high">
          <Sticker {...args} size="xl" bg="info.surface.high" color="info.icon.base" />
        </Swatch>
      </HStack>
    </VStack>
  );

export default function StickerColorsExample(props: Partial<ComponentProps<typeof Sticker>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Sticker>;
  return StickerColorsExampleRender(mergedProps);
}

Default

코드

Open in Playground

import type { ComponentProps } from 'react';
import FaceSmile from '@mildang/icons/react/face-smile';
import { Sticker } from '@mildang/design-system/Sticker';

const STORY_DEFAULT_ARGS = { ...({
    icon: <FaceSmile />,
  }), ...({}) } as ComponentProps<typeof Sticker>;

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