Callout

Callouts highlight a short note, tip or warning next to the content it belongs to. Four semantic variants set the accent color and the default icon.

import { Callout } from 'jarvis-react-ui';

Variants

info (the default) is for neutral notes, success confirms a good state, warning flags something to watch out for and error reports a failure. Each variant brings its own icon.

import { Callout } from 'jarvis-react-ui';

export default function Variants() {
    return (
        <div className="flex w-full max-w-[420px] flex-col gap-2">
            <Callout>Telemetry refreshes every five seconds.</Callout>
            <Callout variant="success">All subsystems online.</Callout>
            <Callout variant="warning">Reactor output above 90 percent.</Callout>
            <Callout variant="error">Uplink lost. Retrying in 10 seconds.</Callout>
        </div>
    );
}

With a title

title adds a small uppercase heading in the variant color above the body.

import { Callout } from 'jarvis-react-ui';

export default function WithTitle() {
    return (
        <div className="flex w-full max-w-[420px] flex-col gap-2">
            <Callout title="Note">Import style.css once at the root of your app.</Callout>
            <Callout variant="warning" title="Heads up">
                ThreeOrb needs the optional three peer dependency.
            </Callout>
        </div>
    );
}

Custom icon or no icon

Pass any lucide-react icon component to icon to replace the variant icon, or icon={false} to render none. The color still follows the variant.

import { Lightbulb } from 'lucide-react';
import { Callout } from 'jarvis-react-ui';

export default function CustomIcon() {
    return (
        <div className="flex w-full max-w-[420px] flex-col gap-2">
            <Callout icon={Lightbulb} title="Tip">
                Hold Shift while dragging a window to swap it with another slot.
            </Callout>
            <Callout icon={false}>A plain note without an icon.</Callout>
        </div>
    );
}

This documentation uses Callout for its own notes, and Markdown blockquotes (> ...) on these pages render as an info callout.

Accessibility

• The root element has role="note", so screen readers announce it as supplementary content.
• The icon is decorative and marked aria-hidden; put the meaning into title or the body text instead of relying on color or icon alone.
• A callout is not a live region. For messages that appear in response to an action, wrap it in your own aria-live container.

API