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

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Alert

Alert

컴포넌트

알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.

feedbackindicator
관련 문서
bun add @reopt-ai/opt-ui
100%

Variants

Information

This is an informational message.

Success

Operation completed successfully.

Warning

Please review before proceeding.

Error

Something went wrong.

Dismissible

닫기 버튼이 있는 Alert

Dismissible Info

Click the X to dismiss this alert.

Dismissible Success

Your changes have been saved.

Without Title

A simple alert without a title.
This action cannot be undone.

Alert

Prop타입기본값설명
variant"info" | "success" | "warning" | "error""info"알림 변형 (색상 및 아이콘 결정)
titlestring—알림 제목
iconReactNode—커스텀 아이콘. 미지정 시 변형에 따른 기본 아이콘 사용
dismissiblebooleanfalse닫기 버튼 표시 여부
onDismiss() => void—닫기 버튼 클릭 핸들러

컴포넌트 의존 관계

깊이
▲ USED BY (1)notification-toastAlert
테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • alert role을 갖는다
  • title과 children을 렌더링한다
  • variant에 따른 스타일을 적용한다
  • dismissible일 때 닫기 버튼을 표시한다

관련 컴포넌트

LoadingOverlay

로딩 오버레이. 중복 status 없이 하나의 aria-busy 라이브 영역으로 콘텐츠 위 로딩 상태를 표시합니다.

피드백인디케이터

NotificationToast

토스트 알림 시스템. 포인터/키보드 상호작용 중 자동 닫힘을 일시 정지하고, 중요도별 live region으로 전역 알림을 관리합니다.

피드백

Kbd

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

인디케이터

StatCard

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

인디케이터

CompositeZone

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

인디케이터

Tabs

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

네비게이션인디케이터
이전Spinner다음Input

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

기본 사용

토스트 위에 포인터를 두거나 닫기 버튼에 포커스하면 남은 자동 닫힘 시간이 일시 정지됩니다. 경고/오류는 assertive, 정보/성공은 polite로 안내되며, 영역 이름은 labels.regionLabel로 번역할 수 있습니다.

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

의미와 선택 상태를 가진 지표

Selected metric: revenue

로딩과 밀도

Query latency184ms↓ -12ms

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

workspace variant — 편집기 탭

문서·쿼리처럼 각 탭이 독립된 작업 상태를 갖는 화면에 쓴다. status로 저장되지 않은 변경(dirty)과 실행 중(running)을 표시하고, actions는 tablist 바깥에 렌더돼 ← → 탭 순회에 끼어들지 않는다.