Callout() — ui Function Reference

Architecture documentation for the Callout() function in callout.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ Callout() — ui Function Reference

Dependency Diagram

graph TD
  d8ebd274_d661_ddf1_8970_64f23463c679["Callout()"]
  6e06e25b_dd13_9f74_5703_ecbb5cde6d1f["callout.tsx"]
  d8ebd274_d661_ddf1_8970_64f23463c679 -->|defined in| 6e06e25b_dd13_9f74_5703_ecbb5cde6d1f
  style d8ebd274_d661_ddf1_8970_64f23463c679 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/callout.tsx lines 8–35

export function Callout({
  title,
  children,
  icon,
  className,
  variant = "default",
  ...props
}: React.ComponentProps<typeof Alert> & {
  icon?: React.ReactNode
  variant?: "default" | "info" | "warning"
}) {
  return (
    <Alert
      data-variant={variant}
      className={cn(
        "bg-surface text-surface-foreground border-surface mt-6 w-auto rounded-xl md:-mx-1 **:[code]:border",
        className
      )}
      {...props}
    >
      {icon}
      {title && <AlertTitle>{title}</AlertTitle>}
      <AlertDescription className="text-card-foreground/80">
        {children}
      </AlertDescription>
    </Alert>
  )
}