Components

Component

Callout

Inline message for important information, tips, and contextual guidance.

ReactReact Native7 props
PreviewReact

Documentation note

Important guidance for this flow.

Read guideline

Temporary notice.

Imports

import { Callout, ActionableCallout, DismissibleCallout } from "@hozorica/hods-react/callout";
import { Callout, ActionableCallout, DismissibleCallout } from "@hozorica/hods-react-native/callout";

Props

PropTypeDescription
description *ReactNodePrimary callout message.
titleReactNodeOptional short heading.
prefixIconReactNodeOptional leading icon. A default information mark is rendered when omitted.
toneneutral | informative | positive | warning | critical | magicSemantic visual tone.
linkPropsCalloutLinkPropsOptional link label for Callout and DismissibleCallout.
open / defaultOpenbooleanDismissibleCallout controlled and uncontrolled visibility.
onDismiss() => voidCalled when DismissibleCallout is dismissed.

Platform Support

React

Callout, ActionableCallout, and DismissibleCallout with tone, icon, title, description, and optional link support.

React Native

View and Pressable based callouts with shared tone, title, description, action, and dismiss concepts.

Usage

<Callout tone="informative" title="Note" description="Important guidance." linkProps={{ children: "Read more" }} />

Notes

  • Use Callout for important context that should stay in the layout.
  • Use ActionableCallout only when the entire message is one clear action.
  • Use DismissibleCallout for temporary notices; do not hide required information behind dismissal.