Callout

A component for displaying important information.

Default Callout

This is a default callout without any specific variant.

1import { Callout } from '@/components/ui/callout';
2
3export function Default() {
4  return (
5    <Callout>
6      <Callout.Title>Default Callout</Callout.Title>
7      <Callout.Content>This is a default callout without any specific variant.</Callout.Content>
8    </Callout>
9  );
10}

Installation

pnpm dlx mateui add callout

Anatomy

1import { Callout } from '@/components/ui/callout';

1<Callout variant="info">
2  <Callout.Title>Note</Callout.Title>
3  <Callout.Content>This is a callout with information.</Callout.Content>
4</Callout>

Variants

info

Information

This is an info callout used for general information.

1import { Callout } from '@/components/ui/callout';
2
3export function Info() {
4  return (
5    <Callout variant="info">
6      <Callout.Title>Information</Callout.Title>
7      <Callout.Content>This is an info callout used for general information.</Callout.Content>
8    </Callout>
9  );
10}

warning

Warning

This is a warning callout. Be careful interacting with this.

1import { Callout } from '@/components/ui/callout';
2
3export function Warning() {
4  return (
5    <Callout variant="warning">
6      <Callout.Title>Warning</Callout.Title>
7      <Callout.Content>
8        This is a warning callout. Be careful interacting with this.
9      </Callout.Content>
10    </Callout>
11  );
12}

danger

Error

This is a danger callout. Something went wrong.

1import { Callout } from '@/components/ui/callout';
2
3export function Danger() {
4  return (
5    <Callout variant="danger">
6      <Callout.Title>Error</Callout.Title>
7      <Callout.Content>This is a danger callout. Something went wrong.</Callout.Content>
8    </Callout>
9  );
10}

success

Success

This is a success callout. The operation was completed successfully.

1import { Callout } from '@/components/ui/callout';
2
3export function Success() {
4  return (
5    <Callout variant="success">
6      <Callout.Title>Success</Callout.Title>
7      <Callout.Content>
8        This is a success callout. The operation was completed successfully.
9      </Callout.Content>
10    </Callout>
11  );
12}

Custom Icon

You can override the default icon by providing the icon prop to Callout.

1<Callout icon={<MyCustomIcon />}>
2  <Callout.Title>Custom</Callout.Title>
3  <Callout.Content>Callout with custom icon</Callout.Content>
4</Callout>

API Reference

Callout

Prop	Type	Default	Description
`variant`	`"default"` \| `"info"` \| `"warning"` \| `"danger"` \| `"success"`	`"default"`	Controls the visual treatment and surface colors.
`icon`	`React.ReactNode`	—	Optional custom icon.
`className`	`string`	—	Additional CSS class names.
`children`	`React.ReactNode`	—	Compose the callout with Title and Content.

Callout.Title

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Heading text for the callout.
`className`	`string`	—	Additional CSS class names.

Callout.Content

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Body copy inside the callout.
`className`	`string`	—	Additional CSS class names.

PreviousButton NextCard