Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Callout component displays highlighted blocks of important information with semantic color variants and optional icons. Ideal for tips, warnings, errors, and informational notes.

​
Import

import { Callout } from "@aurelienbbn/gadget-ui/components";

​
Basic Usage

<Callout>
  This is an informational callout.
</Callout>

​
Variants

The Callout component supports four semantic variants, each with a unique icon: 
<Callout variant="info">
  Informational content goes here.
</Callout>
Blue accent styling with info icon (ℹ). This is the default variant.

​
Props

​
variant
'info' | 'warning' | 'danger' | 'tip'
default:"info"
The semantic variant of the callout.
​
title
string
Optional title displayed above the content in semibold text.
​
children
ReactNode
required
The content of the callout.
​
className
string
Additional CSS classes to apply.
The Callout component extends HTMLAttributes<HTMLDivElement>, so all standard div attributes are supported.

​
Design Details

  • Flex layout with 12px gap between icon and content
  • Rounded corners with border
  • 14px (sm) text size
  • Icon sized at 16px (base) with matching variant color
  • Icon has aria-hidden="true" for accessibility
  • Uses role="note" for semantic HTML

​
Examples

​
With Title

<Callout variant="warning" title="Important Note">
  Make sure to save your changes before navigating away.
</Callout>

​
Info Callout

<Callout variant="info">
  You can customize the appearance using the className prop.
</Callout>

​
Danger Callout

<Callout variant="danger" title="Error">
  Failed to load data. Please try again later.
</Callout>

​
Tip Callout

<Callout variant="tip" title="Pro Tip">
  Use keyboard shortcuts to navigate faster through the interface.
</Callout>

​
With Formatted Content

<Callout variant="info">
  <p>This callout supports rich content.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</Callout>
The content area has [&_p]:m-0 to remove default paragraph margins.

​
Accessibility

  • Icon is hidden from screen readers with aria-hidden="true"
  • Semantic role="note" attribute
  • Color is not the only indicator (icons provide additional context)

​
Component Definition

Location: packages/gadget-ui/src/components/callout.tsx:39

Build docs developers (and LLMs) love

Get started for freeTalk to us