TipBox

Componente de notificación con icono, título y mensaje.

TipBox

Demo

ℹInformación

Operación completada exitosamente.

⚠Advertencia

Revisa los permisos antes de continuar.

✖Error crítico

No se pudo conectar al servidor.

<TipBox color="primary" title="Información" message="Operación completada exitosamente." />
<TipBox color="warning" title="Advertencia" message="Revisa los permisos antes de continuar." />
<TipBox color="danger" title="Error crítico" message="No se pudo conectar al servidor." />

Props

color

Color semántico del borde e icono.

ℹInfo

Mensaje informativo

ℹÉxito

Operación exitosa

⚠Aviso

Revisa esto

✖Error

Algo salió mal

<TipBox color="primary" title="Info" message="Mensaje informativo" />
<TipBox color="success" title="Éxito" message="Operación exitosa" />
<TipBox color="warning" title="Aviso" message="Revisa esto" />
<TipBox color="danger" title="Error" message="Algo salió mal" />

title

Título opcional en negrita.

<TipBox title="Importante" message="Lee esto" />

message

Mensaje descriptivo opcional.

<TipBox title="Info" message="Este es el mensaje" />

API

Prop	Tipo	Default	Descripción
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color semántico del borde e icono
title	string	''	Título opcional
message	string	''	Mensaje opcional

Slots

Slot	Descripción
default	Contenido personalizado (reemplaza title/message)

Tokens usados

--color-{name}, --bg-elevated, --bg, --text, --border, --font-mono