Circle

Data Display

정사각형 영역 안에 토큰 기반 원형 면을 그리는 레이아웃 프리미티브.

Usage

아바타 배경이나 상태 면처럼 일정한 원형 영역이 필요할 때 사용한다.

import

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

API Reference

Circle Props

Prop

Type

Default

color

ColorToken | "currentColor"

currentColor

panda

SystemStyleObject

지정 안 함

size

number

예제

SizeVariants

코드

Open in Playground

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

const CircleSizeVariantsExample = () => (
    <>
      <Circle size={4} />
      <Circle size={8} />
      <Circle size={12} />
      <Circle size={16} />
      <Circle size={24} />
    </>
  );

export default CircleSizeVariantsExample;

Colors

코드

Open in Playground

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

const CircleColorsExample = () => (
    <>
      <Circle size={16} color="currentColor" />
      <Circle size={16} color="neutral.fill.base" />
      <Circle size={16} color="red.light.500" />
    </>
  );

export default CircleColorsExample;