reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
NotificationToast
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.

NotificationToast

Shell

Manage global notifications with priority-aware live regions and auto-dismiss paused during pointer or keyboard interaction.

feedback
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ToastProvider, useToast, NotificationToast, toast } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

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

Usage guidance

Best practices

  • Mount ToastProvider once at the app boundary and call toast from event handlers. Describe the result in message and the next step in action.

Usage to avoid

  • Do not call toast while rendering or rely only on an automatically disappearing toast for essential errors or consent.

Usage examples

Notify the result of a user action

ToastProvider

PropTypeDefaultDescription
childrenRequiredReactNode—앱 컨텐츠
position"top-right" | "top-left" | "bottom-right" | "bottom-left""top-right"토스트 표시 위치
defaultDurationnumber5000기본 표시 시간 (ms)
labelsNotificationToastLabels—토스트 영역의 이름(regionLabel). 토스트 본문은 이미 호출자가 쓴 문장입니다

useToast

PropTypeDefaultDescription
returns{ toasts, addToast, removeToast }—토스트 상태 및 제어 함수

toast

PropTypeDefaultDescription
toast.success / error / info / warning(message: string, options?) => string—훅 없이 어디서든 호출하는 프로그램매틱 API. toast.dismiss(id) / toast.clear()도 제공

NotificationToast

PropTypeDefaultDescription
toastRequiredToastMessage—토스트 메시지 객체
onDismissRequired() => void—닫기 핸들러

컴포넌트 의존 관계

깊이
▼ USES (1)NotificationToastalert
View test results

테스트 커버리지

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

Related components

opt-ui

Alert

Core

Show info, success, warning, or error messages with a title, body, and dismiss button.

opt-ui

StatusSelect

Shells

Choose a status from a dropdown with color indicators.

opt-ui

ConnectionIndicator

Shells

Indicate connected, connecting, disconnected, and error states.

opt-ui

FloatingActionBar

Shells

Show bulk actions for selected items in a floating bottom bar.

opt-ui

FailureList

Shells

Review grouped failures with severity colors and action slots.

opt-ui

AlertBuilder

Shells

Configure metric conditions, frequency, and notification channels with explicitly associated form labels.

PreviousDataTableNextDesignGuidePanel