reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
QueryToolbar
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

QueryToolbar

Shell

Run or cancel queries with explicit changed, current, and running states and split-button actions for selected or full SQL.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { QueryToolbar } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

One button, three states

Run, and the button turns into Cancel until the demo finishes. Save marks the query as changed again.

Usage guidance

Best practices

  • Connect onRun to execution of the statement at the cursor, and onRunAll to execution of statements separated by splitSqlStatements.
  • Calculate runState by comparing the editor snapshot captured at execution with the current document. Comparing a whole document with one extracted statement will keep multi-statement documents marked changed.
  • Connect running and onCancel to the request lifecycle. Cancel the actual request with AbortController or an equivalent, and prevent late responses from overwriting newer results.

Usage to avoid

  • Expose selection and run-all actions only when their callbacks are implemented. Do not use saving to imitate successful execution.

Usage examples

Execution state and cancellation

QueryToolbar

PropTypeDefaultDescription
onRunRequired() => void—커서 위치의 문장 실행
onCancel() => void—실행 중 취소. 있으면 버튼이 Cancel로 전환
runningboolean—실행 중
runStateQueryRunState"idle"마지막 실행 대비 변경 여부
runDisabledReasonstring—실행 불가 사유. 툴팁으로 표시
onRunSelection() => void—선택 영역만 실행
hasSelectionboolean—선택 영역이 있는지. 없으면 항목 비활성
onRunAll() => void—전체 문장 실행
multiStatementboolean—문장이 둘 이상인지. 아니면 전체 실행을 숨김
onSave() => void—저장 다이얼로그 열기
saveDisabledboolean—저장 비활성
childrenReactNode—실행 그룹 뒤의 컨트롤 — 필터, 변수
trailingReactNode—끝쪽 컨트롤
modifierKeystring—단축키 힌트의 수정자 글리프. 기본은 플랫폼 감지
labelsQueryToolbarLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (3)QueryToolbarbuttonkbddropdown-menu
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

QueryToolbar 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

PreviousSchemaTreeNextQueryOutputPane