Callout

Heads up!

You can change your email in your account settings.

Installation

pnpm dlx stera-ui add callout

Usage

import {
  Callout,
  CalloutContent,
  CalloutTitle,
  CalloutDescription,
} from "@/components/ui/callout"

<Callout>
  <CalloutContent>
    <CalloutTitle>Heads up</CalloutTitle>
    <CalloutDescription>This is an informational message.</CalloutDescription>
  </CalloutContent>
</Callout>

With Icon

New update available

A new version of the app is ready to install.

With Action

Cookie policy

We use cookies to improve your experience.

With Close

Cookie policy

We use cookies to improve your experience.

All Variants

Default

This is a default callout message.

Brand

This is a brand callout message.

Accent

This is an accent callout message.

Danger

This is a danger callout message.

Success

This is a success callout message.

Warning

This is a warning callout message.

Variant	Description
`default`	Neutral informational callout
`brand`	Brand-colored callout
`accent`	Accent-colored callout
`danger`	Error or destructive warning
`success`	Confirmation or success message
`warning`	Caution or advisory message

API Reference

Prop	Type	Default
`variant`	`"default" \| "brand" \| "accent" \| "danger" \| "success" \| "warning"`	`"default"`

Subcomponents

Component	Description
`CalloutContent`	Wrapper for title, description, and action
`CalloutTitle`	Heading text
`CalloutDescription`	Supporting body text
`CalloutAction`	Call-to-action link or button
`CalloutClose`	Dismiss button rendered to the right