reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Badge

Badge

Component

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

indicator
Related docs
bun add @reopt-ai/opt-ui
100%

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Badge

PropTypeDefaultDescription
variant"default" | "success" | "warning" | "error" | "info""default"뱃지 색상 변형
size"sm" | "md""md"뱃지 크기
dotbooleanfalse상태 점 표시 여부
progressnumber—원형 프로그레스 값 (0-100). 설정 시 dot 무시
progressSizenumber16프로그레스 링 SVG 크기 (px)

컴포넌트 의존 관계

깊이
▲ USED BY (12)failure-listworkflow-canvasinsights-panelfeature-flag-panelbulk-actionsnotification-centeraudit-logaudit-timelinecohort-comparisonuser-detailmarketplace-catalogitem-detailBadge
View test results

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • children을 렌더링한다
  • variant에 따른 스타일을 적용한다
  • dot 옵션으로 상태 점을 표시한다
  • size에 따른 스타일을 적용한다
  • progress 옵션으로 원형 프로그레스를 표시한다
  • progress가 없으면 SVG를 렌더링하지 않는다

Blocks that use this component

CohortComparison

코호트 비교 Surface. ComparisonChart + RetentionHeatmap + DataTable + N-cohort 지원 (최대 5개). 4탭 조합.

Analytics

ItemDetail

상품/아이템 상세 페이지. 태그, 저자, 콘텐츠, 리뷰 섹션 포함.

Display

MarketplaceCatalog

카드 그리드 기반 마켓플레이스 카탈로그. 검색, 탭 필터, 정렬 지원.

Display

UserDetail

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

Display

Related components

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

Indicator

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

Indicator

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

Indicator

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

Indicator

Skeleton

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

Indicator
PreviousButtonNextSpinner