componente · @solu30/ui-kit/display
Alert
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { Alert } from '@solu30/ui-kit/display'Props
| 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. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.