Devie UI

<Callout />

Success
This is a success message with important information.
Danger
This is a danger message with important information.

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:

"use client";
 
import clsx from "clsx";
import type React from "react";
import styles from "./Callout.module.scss";
 
type Variant = "success" | "danger" | "warning" | "primary" | "sub";
 
interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: Variant;
  children: React.ReactNode;
}
 
function Root({
  variant = "success",
  children,
  className,
  ...props
}: CalloutProps) {
  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>
  );
}
 
interface IconProps {
  children: React.ReactElement;
}
 
function Icon({ children }: IconProps) {
  return <div className={styles.icon}>{children}</div>;
}
 
interface ContentProps {
  title?: string;
  children: React.ReactNode;
}
 
function Content({ title, children }: ContentProps) {
  return (
    <div className={styles.content}>
      {title && <div className={styles.title}>{title}</div>}
      <div className={styles.text}>{children}</div>
    </div>
  );
}
 
const Callout = {
  Root,
  Icon,
  Content,
};
 
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.