Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderProgress BarEmptyTooltip
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarModule BoxChartsColor CardsTableSliderCalendar
Text InputPassword InputTextarea InputCheckboxSwitchRadiogroupSelectorSearch BarDatepickerFile Upload
DropdownPopoverDialogTourDrawerAccordion
Overview
Design Themes

Nebula UI Library

v1.0.0

Component

Alert

Disponible

Alert comunica estados relevantes dentro del flujo sin interrumpir la navegación. Su anatomía se compone de icono, título y descripción obligatorios, con CTA y cierre opcionales según el contexto.

Operación realizada correctamente
La transferencia se realizó con éxito.

Icon · Title · Description · CTA · Close

Import

Importá el componente Alert y estilos base de la librería.

TypeScript
1import 'nave-ui-library/styles.css'
2import { Alert } from 'nave-ui-library/react'

Usage

Uso base con anatomía obligatoria del componente.

Tu Nave Point llega hoy
Tu terminal ya fue enviada y está camino a tu comercio.

Variants

Tonos semánticos disponibles para diferentes niveles de urgencia y contexto.

Operación realizada correctamente
La transferencia se realizó con éxito.
Los pagos con débito se acreditarán en el día
Estamos resolviendo un problema y las acreditaciones pueden tardar un poco más de lo normal.
Completá los datos pendientes
Hay información faltante que impide continuar con la operación. Revisala y actualizala para seguir.
Tu Nave Point llega hoy
Tu terminal ya fue enviada y está camino a tu comercio.

Sizes

Tres tamaños/layouts para distintos anchos de contenedor.

Inline
Máximo 343px de ancho.
Full width
Se adapta al ancho total del contenedor hasta 1184px.
Stacked
Disposición apilada para contextos de alta densidad de contenido.

States

Con y sin acciones opcionales (CTA y cierre) según criticidad del mensaje.

Mensaje descartable
Podés cerrar esta alerta porque no afecta la continuidad de la tarea.
Mensaje persistente
Esta alerta permanece visible hasta que resuelvas la acción requerida.

API Reference

Props disponibles para el componente Alert.

PropTypeDefaultDescription
tone
'success' | 'warning' | 'error' | 'info'infoDefine el estilo visual y semántico de la alerta.
size
'inline' | 'full-width' | 'stacked'inlineControla el ancho máximo y la disposición del contenido.
title
ReactNode—Título principal de la alerta.
description
ReactNode—Texto descriptivo principal de la alerta.
ctaLabel
ReactNode—Texto de la acción opcional (link CTA).
onCtaClick
() => void—Callback ejecutado al presionar la CTA.
ctaHref
string—URL opcional para renderizar la CTA como enlace.
onClose
function—Callback para manejar el cierre de la alerta.
iconreq
ReactNode—Icono semántico de la alerta.
className
string—Clases adicionales para el contenedor.

Registry

Ver configuración técnica del registro
JSON
1{
2  "name": "Alert",
3  "description": "Componente de notificación contextual con soporte para acciones y layouts adaptables.",
4  "component": "Alert",
5  "files": [
6    "components/base/data-display/system-feedback/Alert.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "class-variance-authority"
11  ],
12  "props": {
13    "tone": {
14      "type": "'success' | 'warning' | 'error' | 'info'",
15      "default": "info",
16      "description": "Define el estilo visual y semántico de la alerta."
17    },
18    "size": {
19      "type": "'inline' | 'full-width' | 'stacked'",
20      "default": "inline",
21      "description": "Controla el ancho máximo y la disposición del contenido."
22    },
23    "title": {
24      "type": "ReactNode",
25      "required": true,
26      "description": "Título principal de la alerta."
27    },
28    "description": {
29      "type": "ReactNode",
30      "required": true,
31      "description": "Texto descriptivo principal de la alerta."
32    },
33    "ctaLabel": {
34      "type": "ReactNode",
35      "description": "Texto de la acción opcional (link CTA)."
36    },
37    "onCtaClick": {
38      "type": "() => void",
39      "description": "Callback ejecutado al presionar la CTA."
40    },
41    "ctaHref": {
42      "type": "string",
43      "description": "URL opcional para renderizar la CTA como enlace."
44    },
45    "onClose": {
46      "type": "function",
47      "description": "Callback para manejar el cierre de la alerta."
48    }
49  }
50}