Callout

A versatile component for displaying important messages, alerts, or notifications. The Callout component supports different variants, colors, and optional icons to effectively communicate different types of information to users.

Examples

Default

A basic callout with default styling.

1import { Callout } from "@sugarcoat/ui";
2
3export default function Example() {
4  return <Callout>This is a default callout message.</Callout>;
5}
6

Variants

Different variants to convey different types of messages.

1import { Callout } from "@sugarcoat/ui";
2
3export default function Example() {
4  return (
5    <Stack gap="3">
6      <Callout variant="info">Here's some useful information.</Callout>
7      <Callout variant="success">Operation completed successfully!</Callout>
8      <Callout variant="warning">Please review before proceeding.</Callout>
9      <Callout variant="danger">Critical error occurred.</Callout>
10    </Stack>
11  );
12}
13

Colors

Different color themes for the callout.

1import { Callout } from "@sugarcoat/ui";
2
3export default function Example() {
4  return (
5    <Stack gap="3">
6      <Callout color="default">Default colored callout</Callout>
7      <Callout color="inverse">Inverse colored callout</Callout>
8      <Callout color="neutral">Neutral colored callout</Callout>
9      <Callout color="primary">Primary colored callout</Callout>
10      <Callout color="accent">Accent colored callout</Callout>
11    </Stack>
12  );
13}
14

Without Icon

A callout without an icon.

1import { Callout } from "@sugarcoat/ui";
2
3export default function Example() {
4  return <Callout showIcon={false}>This is a callout without an icon.</Callout>;
5}
6

API Reference

Callout

The main component for displaying callout messages.

Props

| Prop | Type | Default | Description | | ---------- | -------------------------------------------------------------- | ----------- | --------------------------------- | | variant | 'default' \| 'info' \| 'success' \| 'warning' \| 'danger' | 'default' | The variant style of the callout. | | color | 'default' \| 'inverse' \| 'neutral' \| 'primary' \| 'accent' | 'default' | The color theme of the callout. | | showIcon | boolean | true | Whether to show the variant icon. |

Callout.Content

The content area of the callout.

Props

Inherits all HTML div element props.

Callout.Icon

The icon area of the callout.

Props

Inherits all HTML div element props.

Callout.Barebone

A minimal version of the callout without predefined styling.

Props

Same as the main Callout component.

Styling

The Callout component uses a slot-based styling system with the following customizable slots:

• root: The main container
• content: The content area
• icon: The icon container

Each slot can be styled using the recipe API and supports the following variants:

• color: Controls the color theme of the callout
• variant: Controls the visual style and icon of the callout