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

Alert

Component

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

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

Live preview

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

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.

Usage guidance

Best practices

  • Summarize the problem in title and describe the user's next action in the body. Update state through onDismiss when dismissal is available.

Usage to avoid

  • Reserve urgent announcements for urgent information, and explain errors with more than color.

Usage examples

Error message with retry

Alert

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

컴포넌트 의존 관계

깊이
▲ USED BY (1)notification-toastAlert
View test results

테스트 커버리지

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

Related components

opt-ui

LoadingOverlay

Core

Overlay a loading state with one aria-busy live region and no duplicate status announcements.

opt-ui

NotificationToast

Shells

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

opt-ui

Kbd

Core

Display keyboard shortcuts as inline key badges.

opt-ui

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

opt-ui

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

opt-ui

Tabs

Core

Organize tab panels with Root, TabList, Tab, and TabPanel components.

PreviousSpinnerNextInput