Callout

Enfatizar información importante. Guiar usuarios efectivamente.

Default Callout

This is a default callout without any specific variant.

default.tsx

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}

Instalación

pnpm dlx nachui add callout

Anatomía

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

1<Callout variant="info">
2  <Callout.Title>Nota</Callout.Title>
3  <Callout.Content>Este es un callout con información.</Callout.Content>
4</Callout>

Variantes

info

Information

This is an info callout used for general information.

info.tsx

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.

warning.tsx

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.

danger.tsx

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.

success.tsx

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}

Icono Personalizado

Puedes anular el icono por defecto pasando el prop icon a Callout.

1<Callout icon={<MiIconoPersonalizado />}>
2  <Callout.Title>Personalizado</Callout.Title>
3  <Callout.Content>Callout con icono personalizado</Callout.Content>
4</Callout>

Referencia de API

Callout

Propiedad	Tipo	Por defecto	Descripción
`variant`	`"default"` \| `"info"` \| `"warning"` \| `"danger"` \| `"success"`	`"default"`	Controla el estilo visual del callout.
`icon`	`React.ReactNode`	—	Icono personalizado opcional.
`className`	`string`	—	Nombres de clases adicionales.
`children`	`React.ReactNode`	—	Compone el callout con Title y Content.

Callout.Title

Propiedad	Tipo	Por defecto	Descripción
`children`	`React.ReactNode`	—	Texto del título del callout.
`className`	`string`	—	Nombres de clases adicionales.

Callout.Content

Propiedad	Tipo	Por defecto	Descripción
`children`	`React.ReactNode`	—	Contenido principal del callout.
`className`	`string`	—	Nombres de clases adicionales.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorButton

SiguienteCard