Callout

Import

import { Callout } from "@sugarcoat/ui-nxt";

Usage

<Callout color="primary">
<Callout.Icon>💡</Callout.Icon>
<Callout.Content>This is an important message.</Callout.Content>
</Callout>

Basic Usage#

A simple callout for highlighting information.

Basic Callout

Anatomy#

The Callout component uses a compound component pattern:

<Callout>
  <Callout.Icon />     {/* Optional icon area */}
  <Callout.Content />  {/* Main content area */}
</Callout>

With Icon#

Add an icon to draw attention to the callout.

With Icon

Colors#

Use different colors to convey different types of messages.

Default

Primary

Accent

Neutral

Inverse

Common Use Cases#

Information Note#

Info

Tip or Suggestion#

Tip

Warning#

Warning

Important Notice#

Important

Rich Content#

Callouts can contain rich content including formatted text and other components.

Rich Content

Without Icon#

Callouts work fine without an icon for simpler messages.

No Icon

In Documentation Context#

Documentation Example

Props#

Callout (Root)#

Prop	Type	Default	Description
color	"default" \| "primary" \| "accent" \| "neutral" \| "inverse"	"default"	Color scheme of the callout
children	ReactNode	-	Callout content (Icon and Content components)

Callout.Icon#

Prop	Type	Default	Description
children	ReactNode	-	Icon or emoji to display

Callout.Content#

Prop	Type	Default	Description
children	ReactNode	-	Main content of the callout

Accessibility#

The Callout component includes role="note" by default for proper semantic meaning. Screen readers will announce the callout as a note to users.