Callout

The Callout component highlights a passage of content in a tinted, bordered box with a leading icon. Five semantic intents cover the usual admonitions: note, info, warning, danger, and success. Without a $type it renders as a neutral card on the theme's surface colors, with no tint and no icon.

import React from "react";
import { Callout } from "cherry-styled-components";

export default function Page() {
  return (
    <Callout $type="warning">
      <p>Changing this setting logs out every active session.</p>
    </Callout>
  );
}

Each intent brings its own icon: CircleAlert for note, Info for info, TriangleAlert for warning, OctagonAlert for danger, and Check for success.

Properties

$type"note" | "info" | "warning" | "danger" | "success"

The semantic intent, controlling tint and default icon. Omit it for a neutral, untinted card.

$iconIconProps

Lucide icon name that overrides the intent's default icon, or supplies one for an untyped callout.

$hideIconboolean

Renders the callout without an icon.

The component also accepts all native <div> attributes and forwards its ref to the root element. The library exports the CalloutType type.

The tints are alert-semantic and deliberately independent of the brand palette: a white-labeled theme can recolor everything else without a danger callout turning reassuring. Each intent carries a light and a dark tint, and the dark one applies both when the theme object is dark and under a dark class on <html>, so it is correct even before hydration swaps the theme.

View Source