Callout

Dismissible promo card with an icon chip, copy, and a single CTA — drop into sidebars and empty states.

New: Concept approvals

Review and approve concept rounds without leaving your dashboard.

Try it out
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/callout.json
Usage
Drop into a sidebar footer, empty state, or settings panel as a dismissible promo.
TSImport
import { Callout } from "@/components/blocks/callout";
TSExample
import { Callout } from "@/components/blocks/callout";

export function Example() {
  return (
    <Callout
      title="Join our Slack Community"
      description="Connect with other churches, swap ideas, and get support from The Squad."
      actionLabel="Join Slack"
      actionHref="https://join.slack.com/..."
      onDismiss={() => console.log("dismissed")}
    />
  );
}
Composition
Icon chip + title row, optional description, optional CTA, optional dismiss.
Callout
├── color="violet | brand | default" | "#hex"   (named flag or any CSS hex; violet = Slack #4a154b)
├── icon                                (optional ReactNode rendered in a 6×6 chip)
├── title                               (text-sm font-medium white heading)
├── description                         (optional text-xs white/80 paragraph)
├── actionLabel + actionHref|onAction   (optional bottom CTA — renders as <a> or <button>)
└── onDismiss                           (optional — renders a top-right X close button)
Default
Slack-violet background, icon chip, dismiss button, and a CTA. The reference look used for community/announcement cards in sidebars.

New: Concept approvals

Review and approve concept rounds without leaving your dashboard.

Try it out
No dismiss
Omit `onDismiss` for a persistent promo that can't be closed.

Join our Slack Community

Connect with other churches, swap ideas, and get support from The Squad.

Join Slack
No action
Omit `actionLabel` for an informational callout — no CTA, dismiss only.

Join our Slack Community

Connect with other churches, swap ideas, and get support from The Squad.

Slack violet
Pass `color="violet"` (`#4a154b`) for the Slack-brand look — the original reference card.

Join our Slack Community

Connect with other churches, swap ideas, and get support from The Squad.

Join Slack
Custom hex
`color` also accepts any hex string — useful for one-off announcements that don't match a named brand tone. The CTA + dismiss buttons re-tint via `currentColor` so contrast stays correct on any darkish background.

Custom hex background

Pass any hex string to `color` — text and inner controls re-tint via currentColor.

Learn more
API Reference
Props for the Callout component.

Callout

PropTypeDefaultDescription
titlestring—Bold heading line.
descriptionstring—Optional supporting copy below the title.
iconReactNode—Icon rendered inside the 6×6 chip to the left of the title.
actionLabelstring—CTA button label. Omit to hide the action.
actionHrefstring—When set, the CTA renders as an `<a>` with this href.
onAction() => void—Click handler when the CTA renders as a button (`actionHref` not set).
onDismiss() => void—When provided, renders a top-right X dismiss button.
dismissLabelstring"Dismiss announcement"aria-label for the dismiss button.
color"violet" | "brand" | "default" | `#${string}`"brand"Background tone. Pass a named flag (`brand` = Squad #341756, `violet` = Slack #4a154b, `default` = theme foreground) or any CSS hex like `"#F9635D"`. Inner controls retint automatically via `currentColor`.
classNamestring—Override or extend the wrapper classes.