Callout

A custom component used to highlight important information in your application.

The Callout component is a custom component used to highlight important information in your application. It is designed to be flexible and easy to use, with four different types to choose from: info, success, warning, and error.

Props

The Callout component accepts the following props:

  • type: (optional) This prop determines the type of the callout. It can be one of the following values: info, success, warning, error. If not provided, the default type is info.

  • children: This prop is used to pass the content that will be displayed inside the callout.

Usage

Here is an example of how to use the Callout component:

1import {Callout} from '@components' 2 3<Callout type="info"> 4 This is an important message. 5</Callout>

In this example, an info type callout is created with the message "This is an important message."

Styling

The Callout component uses different styles based on the type prop. The styles are defined in the calloutVariants object in the callout.tsx file. )

/components/articles/components/callout.tsx
1export const calloutVariants = cva( 2 [ "relative rounded-lg border-l-4 border p-4 my-6 overflow-clip text-base-600 first:mt-0 last:mb-0"], 3 { 4 variants: { 5 type: { 6 info: "bg-white border-base-200", 7 success: "bg-emerald-200/40 border-emerald-200 dark:bg-emerald-950 dark:border-emerald-800/40", 8 warning: "bg-amber-200/40 border-amber-200 dark:bg-yellow-950 dark:border-yellow-800/40", 9 error: "bg-rose-200/40 border-rose-200 dark:bg-rose-950 dark:border-rose-800/40", 10 }, 11 }, 12 defaultVariants: { 13 type: "info", 14 }, 15 }, 16)

Each type has a different background color, border color, and text color. The colors are defined using Tailwind CSS classes.

Icons

The Callout component also includes an icon that corresponds to the type prop. The icons are imported from the @tabler/icons-react package.

/components/articles/components/callout.tsx
1const Icon = { 2 info: IconInfoCircle, 3 success: IconCircleCheck, 4 warning: IconAlertCircle, 5 error: IconCircleX, 6}[type || "info"]

Examples

With no title provided it takes the default title provided in the config.

You've been selected for a special mission!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This component is simply a re-export

Provide a title in the tag and it's used in the component

This will be a heading inside a callout component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Last updated a year ago
Scroll to top
Was this article helpful?