CoreDot

레거시 도트 인디케이터 컴포넌트. Dot으로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Dot을 사용하세요.

CoreDot은 상태·카테고리를 색상으로 나타내는 소형 원형 인디케이터입니다.

4가지 size — xs(6px), sm(8px), md(10px), lg(14px)
7가지 color — 시맨틱 토큰 기반 색상 팔레트
2가지 type — filled(채움), border(흰색 테두리 추가)

Usage

Filled / Border

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreDot size="md" color="red" type="filled" />
<CoreDot size="md" color="red" type="border" />
<CoreDot size="md" color="green" type="filled" />
<CoreDot size="md" color="green" type="border" />
</HStack>

크기 비교

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreDot size="xs" color="purple" type="filled" />
<CoreDot size="sm" color="purple" type="filled" />
<CoreDot size="md" color="purple" type="filled" />
<CoreDot size="lg" color="purple" type="filled" />
</HStack>

색상 팔레트

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreDot size="md" color="black"  type="filled" />
<CoreDot size="md" color="gray"   type="filled" />
<CoreDot size="md" color="white"  type="filled" />
<CoreDot size="md" color="red"    type="filled" />
<CoreDot size="md" color="orange" type="filled" />
<CoreDot size="md" color="green"  type="filled" />
<CoreDot size="md" color="purple" type="filled" />
</HStack>

상태 표시 예시

<VStack $css={{ gap: '8px' }}>
<HStack $css={{ gap: '6px', alignItems: 'center' }}>
  <CoreDot size="sm" color="green"  type="filled" />
  <span>활성</span>
</HStack>
<HStack $css={{ gap: '6px', alignItems: 'center' }}>
  <CoreDot size="sm" color="orange" type="filled" />
  <span>대기</span>
</HStack>
<HStack $css={{ gap: '6px', alignItems: 'center' }}>
  <CoreDot size="sm" color="red"    type="filled" />
  <span>오류</span>
</HStack>
<HStack $css={{ gap: '6px', alignItems: 'center' }}>
  <CoreDot size="sm" color="gray"   type="filled" />
  <span>비활성</span>
</HStack>
</VStack>

Props

ComponentPropsWithoutRef<'div'>를 확장한 컴포넌트입니다.

Prop

Type

dotColorType

Prop

Type

dotSizeType

Prop

Type

dotType

Prop

Type

스타일

display: flex, flex: none
border-radius: radius-full (완전한 원)

Size Variants

size	width × height
`xs`	6 × 6 px
`sm`	8 × 8 px
`md`	10 × 10 px
`lg`	14 × 14 px

Color Variants

color	토큰
`black`	`gray-90`
`gray`	`gray-40`
`white`	`white`
`red`	`red-50`
`orange`	`orange-50`
`green`	`green-50`
`purple`	`primary-60`

Type Variants

type	설명
`filled`	기본 채움
`border`	`border: 1px solid white` 추가 (겹침 표시용)

마이그레이션 가이드

신규 Dot 컴포넌트는 디자인 토큰 연동과 반응형 size prop을 지원합니다.

Before / After

// Before — CoreDot
<CoreDot size="sm" color="green" type="filled" />

// After — Dot
<Dot size="sm" color="green" type="filled" />

변경 사항

CoreDot	Dot
`color="purple"`	`color="purple"` (동일)
`type="border"`	`type="border"` (동일)
`size` — 정적 string	`size` — 반응형 객체 지원 (`{ mobile: 'xs', desktop: 'md' }`)
`import { CoreDot }`	`import { Dot }`

On this page