Callout Component
A static inline alert that lives in the page flow — use it for persistent messages, while the toast system (ToastProvider) handles transient notifications.
Import
javascript
1import { Callout } from "@neuctra/ui";Types
Heads up
A new version is available.
Payment received
Your invoice has been settled.
Storage almost full
You have used 90% of your quota.
Sync failed
We could not reach the server.
A neutral note without a title.
Outline, Custom Icon & Dismissible
v0.4.0 shipped
Eight new components, including DatePicker and Carousel.
Props
All available props for the Callout component.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "info" | "success" | "warning" | "error" | "neutral" | "info" | Semantic color and default icon |
| variant | "soft" | "outline" | "soft" | Tinted background or border-only |
| title | ReactNode | — | Bold headline |
| children | ReactNode | — | Body content |
| icon | ReactNode | null | type icon | Custom icon; null hides it |
| dismissible | boolean | false | Show a close button; self-removes on click |
| onDismiss | () => void | — | Fired when dismissed |
| iconClassName | string | — | Styles the leading icon wrapper. |
| contentClassName | string | — | Styles the wrapper around the title and body content. |
| titleClassName | string | — | Styles the title text. |
| descriptionClassName | string | — | Styles the body content wrapper. |
| closeButtonClassName | string | — | Styles the dismiss/close button. |
Accessibility
- Error callouts render role="alert" (interruptive); all others role="status".
- The dismiss button is labelled and focus-ringed; icons are decorative.
Frequently Asked Questions
How do I install and import the Callout component?
Install the @neuctra/ui package, then import it with: import { Callout } from "@neuctra/ui";
What variants and sizes does Callout support?
Callout supports variants: soft, outline. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Callout component accessible?
Callout is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.