Devie UI
Version: 2026-02-14

<Callout />

New feature available
You can now export your data in multiple formats including CSV, JSON, and PDF.
Proceed with caution
This action will permanently delete all selected items. Make sure you have a backup before continuing.
Did you know?
You can use keyboard shortcuts to navigate faster.

The Callout component is ideal for providing contextual messages within sections of your interface. It supports different variants to convey different types of information: success, danger, warning, primary, and sub.

The component uses a compound pattern with Callout.Icon and Callout.Content subcomponents, allowing you to customize the icon or omit it entirely.

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/callout
 
"use client";
 
import clsx from "clsx";
import type React from "react";
import styles from "./Callout.module.scss";
 
type Variant = "success" | "danger" | "warning" | "primary" | "sub";
 
function Root({
  variant = "success",
  children,
  className,
  ...props
}: Callout.Root.Props) {
  return (
    <div
      className={clsx(
        styles.container,
        variant === "success" && styles.variantSuccess,
        variant === "danger" && styles.variantDanger,
        variant === "warning" && styles.variantWarning,
        variant === "primary" && styles.variantPrimary,
        variant === "sub" && styles.variantSub,
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}
 
function Icon({ children }: Callout.Icon.Props) {
  return <div className={styles.icon}>{children}</div>;
}
 
function Content({ title, children }: Callout.Content.Props) {
  return (
    <div className={styles.content}>
      {title && <div className={styles.title}>{title}</div>}
      <div className={styles.text}>{children}</div>
    </div>
  );
}
 
const Callout = {
  Root,
  Icon,
  Content,
};
 
namespace Callout {
  export namespace Root {
    export interface Props extends React.HTMLAttributes<HTMLDivElement> {
      variant?: Variant;
      children: React.ReactNode;
    }
  }
  export namespace Icon {
    export interface Props {
      children: React.ReactElement;
    }
  }
  export namespace Content {
    export interface Props {
      title?: string;
      children: React.ReactNode;
    }
  }
}
 
export default Callout;

Use Cases

Callout Variants

Callouts come in five variants: success, danger, warning, primary, and sub. Each variant has distinct colors suitable for different types of messaging.

Success
This is a success message with important information.
Danger
This is a danger message with important information.
Warning
This is a warning message with important information.
Primary
This is a primary message with important information.
Sub
This is a sub message with less emphasis.