Callout

Highlighted block that draws attention to supporting information, tips, or guidance inline with content.

stable
since v0.1.0
0.72 kB
feedback
info
content

Preview

tsx

import { Callout, CalloutContent, CalloutTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Callout>
      <CalloutTitle>Good to know</CalloutTitle>
      <CalloutContent>Callouts surface helpful context inline with your content.</CalloutContent>
    </Callout>
  );
}

Color schemes

Callout ships five colour schemes — accent (default), neutral, success, warning, and danger. Pick the tone that matches the supporting message.

Preview

Open

tsx

import { Callout, CalloutContent, CalloutTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Callout colorScheme="accent">
        <CalloutTitle>Accent</CalloutTitle>
        <CalloutContent>Use the accent tone to highlight a primary tip.</CalloutContent>
      </Callout>
      <Callout colorScheme="neutral">
        <CalloutTitle>Neutral</CalloutTitle>
        <CalloutContent>Use neutral for quiet asides and footnotes.</CalloutContent>
      </Callout>
      <Callout colorScheme="success">
        <CalloutTitle>Success</CalloutTitle>
        <CalloutContent>
          Confirms a positive outcome inline with the surrounding content.
        </CalloutContent>
      </Callout>
      <Callout colorScheme="warning">
        <CalloutTitle>Warning</CalloutTitle>
        <CalloutContent>Signals caution without escalating to an alert.</CalloutContent>
      </Callout>
      <Callout colorScheme="danger">
        <CalloutTitle>Danger</CalloutTitle>
        <CalloutContent>
          Flags risk in supporting context. Use Alert for interruptive errors.
        </CalloutContent>
      </Callout>
    </div>
  );
}

Outline variant

Switch to variant="outline" for a lighter, border-only treatment that recedes into dense layouts. The default soft variant uses a tinted surface.

Preview

Open

tsx

import { Callout, CalloutContent, CalloutTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Callout variant="outline" colorScheme="accent">
        <CalloutTitle>Outline accent</CalloutTitle>
        <CalloutContent>A lighter, border-only treatment for dense layouts.</CalloutContent>
      </Callout>
      <Callout variant="outline" colorScheme="success">
        <CalloutTitle>Outline success</CalloutTitle>
        <CalloutContent>
          Pair with a textual title so meaning never relies on colour alone.
        </CalloutContent>
      </Callout>
    </div>
  );
}

With icon

Pass any node to the icon prop. Icons are wrapped in an aria-hidden span, so colour and shape stay decorative.

Preview

Open

tsx

import { Callout, CalloutContent, CalloutTitle } from '@arshad-shah/cynosure-react';

const InfoIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.75"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <circle cx="12" cy="12" r="9" />
    <line x1="12" y1="8" x2="12" y2="8" />
    <polyline points="11 12 12 12 12 16 13 16" />
  </svg>
);

export default function Example() {
  return (
    <Callout colorScheme="accent" icon={<InfoIcon />}>
      <CalloutTitle>Tip</CalloutTitle>
      <CalloutContent>
        Pair an icon with a clear title so the callout reads well in scanning mode.
      </CalloutContent>
    </Callout>
  );
}

API

PropTypeDefaultDescription

colorScheme

"accent"|"neutral"|"success"|"warning"|"danger"

accent

Semantic palette. One of `accent`, `neutral`, `success`, `warning`, `danger`.

variant

"soft"|"outline"

soft

Visual style. `soft` is a tinted surface; `outline` is bordered.

icon

ReactNode

—

Leading icon node. Pass `false` to skip rendering an icon slot.

Accessibility

Use CalloutTitle (renders a <p> by default; pass as="h3" for a heading) so the callout is labelled for assistive tech.
Colour alone never carries meaning — keep a textual title that conveys intent (e.g. “Heads up”, “Required”).
Reserve Callout for non-urgent context. Use Alert when the content is interruptive or live.
Inline icons render inside a decorative wrapper; supply text labels in CalloutContent for screen readers.

Recipes

Use callouts for tips, notes, and “good to know” asides inside long-form documentation.
Promote CalloutTitle to a heading (as="h3") when the callout introduces a new section.
Combine variant="outline" with colorScheme="neutral" for a quiet “note” treatment.
Reserve a single callout colour per page so the visual rhythm stays calm.