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/Button

Button

Component

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

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

Variants

Sizes

States

Loading & Disabled

With Icons

Button

PropTypeDefaultDescription
variant"primary" | "secondary" | "ghost" | "danger""primary"버튼 스타일 변형
size"sm" | "md" | "lg""md"버튼 크기
loadingbooleanfalse로딩 상태. true면 스피너 표시 및 비활성화
leftIconReactNode—버튼 텍스트 왼쪽에 표시할 아이콘
rightIconReactNode—버튼 텍스트 오른쪽에 표시할 아이콘
disabledboolean—비활성화 상태

컴포넌트 의존 관계

깊이
▲ USED BY (29)data-tablefilter-barfloating-action-baralert-buildersql-editorreport-buildersegment-buildercriteria-builderinsights-paneltime-range-selectorexport-buttoncomparison-selectorwebhook-configdata-import-wizardsaved-filtersaudit-timelinechat-sidebarchat-inputquery-toolbarquery-history-listquery-workspacealert-managerproject-settingssegment-managerpath-analysiscohort-comparisoncustom-dashboardproject-overviewitem-detailButton
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • button role을 렌더링한다
  • variant에 따른 스타일을 적용한다
  • loading 상태에서 비활성화된다
  • disabled 상태를 지원한다
  • leftIcon을 렌더링한다

Blocks that use this component

AlertManager

알림 관리 Surface. DataTable + AlertBuilder 조합.

Feedback

CohortComparison

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

Analytics

CustomDashboard

커스텀 대시보드 Surface. WidgetGrid + ReportBuilder + ReportWidget + FilterBar 조합.

Display

ItemDetail

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

Display

PathAnalysis

경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.

Analytics

ProjectOverview

프로젝트 개요 Surface. SummaryRow + NavCards + LineChart + BarChart + DataTable + CodeSnippetViewer + Dashboard CRUD 조합.

Display

ProjectSettings

프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.

Display

SegmentManager

세그먼트 관리 Surface. DataTable + SegmentBuilder 조합.

Filter

Related components

Select

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

Input

Combobox

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

Input

Input

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

Input

Switch

토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.

Input

Textarea

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

Input

Checkbox

독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹과 DOM property까지 동기화되는 indeterminate 상태를 지원합니다.

Input
PreviousFormNextBadge

기본 사용

Alerts

NameFrequencyChannelsStatus
High Error Raterealtimeemail, slackActive
Low ConversionhourlyemailInactive