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

Callout

Component

Keep a persistent notice in the page layout while its condition applies, without a dismiss action.

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

Live preview

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

100%

Tones

정리할 신규 이벤트 12개

7일 안에 처음 관측된 이벤트입니다.

카탈로그가 최신입니다

마지막 push 이후 드리프트가 없습니다.

표본 기반 수치

최근 10,000행에서 계산했습니다.

롤업이 재계산 중입니다

완료될 때까지 시간별 브레이크다운이 뒤처집니다.

보관된 이벤트는 목록에서 빠집니다

상태 필터에서 "보관"을 골라야 보입니다.

With an action

정리할 신규 이벤트 12개

이름과 상태를 붙이면 분석 화면에서 제대로 읽힙니다.

Body only, no glyph

이 목록은 최근 30일 안에 수신된 이벤트만 셉니다.

Usage guidance

Best practices

  • Use for information that remains relevant while a condition holds, such as new items to organize or sample-based figures.

Usage to avoid

  • Use Alert to announce something that just happened. Callout has no dismiss action.

Usage examples

Information shown while a condition holds

Callout

PropTypeDefaultDescription
tone"info" | "success" | "warning" | "danger" | "neutral""info"고지의 성격
titleReactNode—한 줄 제목
iconReactNode—tone 기본 글리프 대체. null이면 글리프 없음
actionReactNode—다음 한 걸음. 둘 이상이면 고지가 아니라 폼
size"sm" | "md""md"밀도
childrenReactNode—본문

컴포넌트 의존 관계

깊이
▲ USED BY (2)criteria-builderquery-filters-menuCallout
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

PreviousShaderSurfaceNextStatusDot