Banner
Disponible
Banner es el bloque recomendado para comunicar promociones, beneficios y acciones contextuales dentro del flujo principal.
Nuevo módulo de fidelización
Crea campañas por segmentos y mide resultados en tiempo real.
Promo | Informativo | Actionable
Importación
Paso 1: importá estilos globales y el componente desde la librería.
TypeScript
1import 'nave-ui-library/styles.css'2import { Banner } from 'nave-ui-library/react'Quick Start
Ejemplo base listo para copiar y pegar en una pantalla real.
10% de descuento en tu próxima compra
Válido hasta el viernes para todos los medios de pago.
Guía de uso
Reglas prácticas para elegir layout, jerarquía visual y acción principal.
Horizontal
Para superficies anchas, side modules y listas de promos con imagen lateral.
Vertical
Ideal para cards y widgets compactos donde la imagen lidera arriba o abajo.
CTA
Usa una sola acción principal por banner para mantener lectura clara y foco.
Caso Nave Point 373x80
Caso productivo 373x80: imagen 64x64, radio 12px, gap 16px y padding 8/8/8/20. Los colores se heredan del theme activo.
Empezá a cobrar con Nave Point
Recibí pagos con tarjeta de crédito, débito y QR
Empezá a cobrar con Nave Point
Recibí pagos con tarjeta de crédito, débito y QR
Variantes visuales
Usa variant para reflejar prioridad: principal, secundaria o comunicación informativa.
Variante primary
Acción principal o promo de mayor impacto.
Variante secondary
Para fondos suaves con texto oscuro.
Variante tertiary
Para comunicaciones informativas o tácticas.
CTA y slots
Escala de interacción: CTA único, CTA compuesto o contenido extra con slots.
CTA custom
Múltiples acciones para decisiones rápidas.
Con icon y endSlot
Ideal para avisos enriquecidos.
Nuevo
Hero background
Modo hero para mensajes de campaña con alto contraste y acción destacada.
Campaña de temporada
Activa beneficios especiales y aumenta ticket promedio.
API Reference
Props principales del componente Banner.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'success' | 'warning' | 'error' | 'info' | — | Estilo visual y semántico del banner. |
title | ReactNode | — | Título principal del banner. |
description | ReactNode | — | Descripción breve de apoyo. |
cta | ReactNode | — | Acción principal (texto o nodo custom). |
imageSrc | string | — | URL de imagen. |
imageAlt | string | — | Texto alternativo de accesibilidad. |
variant | 'primary' | 'secondary' | 'tertiary' | primary | Jerarquía visual del banner. |
orientation | 'horizontal' | 'vertical' | vertical | Dirección principal del layout. |
imagePosition | 'left' | 'right' | 'top' | 'bottom' | — | Posición de la imagen según orientación. |
size | 'compact' | 'full' | compact | Escala del bloque. |
contentAlign | 'left' | 'center' | left | Alineación de contenido interno. |
imageDisplay | 'inline' | 'background' | inline | Imagen embebida o como fondo hero. |
heroContentPosition | 'top' | 'center' | 'between' | between | Distribución vertical en modo background. |
tokens | Partial<ThemeTokensBase> | — | Overrides locales de estilo/tokens por instancia. |
titlereq | ReactNode | — | Título principal del banner. |
description | ReactNode | — | Descripción breve de apoyo. |
cta | ReactNode | — | Acción principal (texto o nodo custom). |
imageSrcreq | string | — | URL de imagen. |
imageAlt | string | — | Texto alternativo de accesibilidad. |
variant | "primary" | "secondary" | "tertiary" | "primary" | Jerarquía visual del banner. |
orientation | "horizontal" | "vertical" | "vertical" | Dirección principal del layout. |
imagePosition | "left" | "right" | "top" | "bottom" | — | Posición de la imagen según orientación. |
size | "compact" | "full" | "compact" | Escala del bloque. |
contentAlign | "left" | "center" | "left" | Alineación de contenido interno. |
imageDisplay | "inline" | "background" | "inline" | Imagen embebida o como fondo hero. |
heroContentPosition | "top" | "center" | "between" | "between" | Distribución vertical en modo background. |
tokens | Partial<ThemeTokensBase> | — | Overrides locales de estilo/tokens por instancia. |
Registry
Ver configuración técnica del registro
JSON
1{2 "name": "Banner",3 "description": "Banner promocional con estilo destacado.",4 "component": "Banner",5 "files": [6 "components/base/data-display/cards-blocks/Banner.tsx"7 ],8 "dependencies": [9 "react",10 "class-variance-authority"11 ],12 "props": {13 "tone": {14 "type": "'success' | 'warning' | 'error' | 'info'",15 "description": "Estilo visual y semántico del banner."16 },17 "title": {18 "type": "ReactNode",19 "required": true,20 "description": "Título principal del banner."21 },22 "description": {23 "type": "ReactNode",24 "description": "Descripción breve de apoyo."25 },26 "cta": {27 "type": "ReactNode",28 "description": "Acción principal (texto o nodo custom)."29 },30 "imageSrc": {31 "type": "string",32 "required": true,33 "description": "URL de imagen."34 },35 "imageAlt": {36 "type": "string",37 "description": "Texto alternativo de accesibilidad."38 },39 "variant": {40 "type": "'primary' | 'secondary' | 'tertiary'",41 "default": "primary",42 "description": "Jerarquía visual del banner."43 },44 "orientation": {45 "type": "'horizontal' | 'vertical'",46 "default": "vertical",47 "description": "Dirección principal del layout."48 },49 "imagePosition": {50 "type": "'left' | 'right' | 'top' | 'bottom'",51 "description": "Posición de la imagen según orientación."52 },53 "size": {54 "type": "'compact' | 'full'",55 "default": "compact",56 "description": "Escala del bloque."57 },58 "contentAlign": {59 "type": "'left' | 'center'",60 "default": "left",61 "description": "Alineación de contenido interno."62 },63 "imageDisplay": {64 "type": "'inline' | 'background'",65 "default": "inline",66 "description": "Imagen embebida o como fondo hero."67 },68 "heroContentPosition": {69 "type": "'top' | 'center' | 'between'",70 "default": "between",71 "description": "Distribución vertical en modo background."72 },73 "tokens": {74 "type": "Partial<ThemeTokensBase>",75 "description": "Overrides locales de estilo/tokens por instancia."76 }77 }78}