componente · @solu30/ui-kit/display

Alert

Bloque de aviso con título, ícono y cierre opcional, en cinco colores semánticos.

300 sitios de import en 9 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
elliot
gestorsalon
luigi
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function AlertMatrix() {
  return (
    <Stage label="Alert · 4 colores semánticos + Alerts.* + Alert crudo (lg, sin ícono, con onClose)" tall wide>
      <div className="flex w-full flex-col gap-2.5">
        <Alert color="info" size="sm" title="Información" showDefaultIcon>
          El preset se importa una sola vez, en el globals.css del host.
        </Alert>
        <Alert color="success" size="sm" title="Confirmado" showDefaultIcon>
          La reserva quedó registrada y el salón se marcó como ocupado.
        </Alert>
        <Alert color="warning" size="sm" title="Revisar" showDefaultIcon>
          Hay dos eventos superpuestos en la misma franja horaria.
        </Alert>
        <Alert color="error" size="sm" title="No se pudo guardar" showDefaultIcon>
          El período de facturación ya está cerrado.
        </Alert>
        <Alerts.Info title="Pronóstico">
          Sábado con 60% de probabilidad de lluvia — avisale al cliente de la carpa.
        </Alerts.Info>
        <Alerts.Success title="Reserva #482">Seña recibida, cupo confirmado para 180 invitados.</Alerts.Success>
        <Alerts.Warning title="Disponibilidad">
          Quedan 2 lanchas para el charter del domingo — no reservar una tercera salida.
        </Alerts.Warning>
        <Alerts.Error title="Cobro rechazado">La tarjeta terminada en 4021 rechazó la seña de $45.000.</Alerts.Error>
        <Alerts.Special title="Beta">El heladero ya puede subir fotos del local desde WhatsApp.</Alerts.Special>
        <Alert color="info" size="lg" showDefaultIcon={false} onClose={() => {}}>
          Sin ícono default, tamaño lg, con botón de cerrar.
        </Alert>
      </div>
    </Stage>
  )
}

De specimens/feedback.tsx · AlertMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { Alert } from '@solu30/ui-kit/display'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
color	opcional	`AlertColor`	Alert color using semantic tokens: info, success, error, warning, special
size	opcional	`AlertSize`	Alert size
title	opcional	`string`	Alert title
children	sí	`ReactNode`	Alert content
icon	opcional	`ReactNode`	Optional icon (svg element or component)
showDefaultIcon	opcional	`boolean`	Show default icon for color
onClose	opcional	`() => void`	Close handler
className	opcional	`string`	Additional className

Ejemplo del paquete

// Info alert with title
<Alert color="info" title="Information">
  This is an informational message
</Alert>

// Success alert
<Alert color="success" title="Success">
  Operation completed
</Alert>

// Error alert with close button
<Alert color="error" title="Error" onClose={() => {}}>
  Something went wrong
</Alert>

// Large warning without default icon
<Alert color="warning" size="lg" showDefaultIcon={false}>
  Warning message
</Alert>

// Special/accent color with custom icon
<Alert color="special" icon={<CustomIcon />}>
  Special message
</Alert>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.