reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/Shells/NotificationToast

NotificationToast

Shell

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

feedback
Related docs
npx @reopt-ai/opt-cli surface add notification-toast
100%

기본 사용

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

컴포넌트 의존 관계

깊이
▼ USES (1)NotificationToastalert

테스트 커버리지

2026년 7월 9일9/9 통과
9성공
0실패
9전체
  • ToastProvider 컨텍스트를 제공한다
  • addToast로 토스트를 추가할 수 있다
  • 토스트에 닫기 버튼이 있다
  • 닫기 버튼 클릭으로 토스트를 제거할 수 있다
  • 프로그램매틱 toast.success()가 훅 없이 토스트를 띄운다
  • toast.dismiss(id)로 특정 토스트를 닫는다
  • stackLimit을 초과하면 오래된 토스트를 버린다
  • 다른 토스트 추가로 기존 auto-hide 타이머가 재시작되지 않는다
  • hover 중에는 auto-hide를 멈추고 남은 시간부터 재개한다

Related components

Alert

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

FeedbackIndicator

StatusSelect

색상 인디케이터가 있는 상태 선택 드롭다운.

Feedback

ConnectionIndicator

연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.

Feedback

FloatingActionBar

플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다.

Feedback

FailureList

실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다.

Feedback

AlertBuilder

알림 빌더. 명시적으로 연결된 폼 레이블로 메트릭 조건, 빈도, 채널을 구성합니다.

Feedback
PreviousDataTableNextDesignGuidePanel

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.

기본 사용

색상 커스터마이징

ConnectedConnecting...DisconnectedConnection lost
Persistent LakeVolatileRecoveredIdle
3 selected