Component

Tour

Componente de onboarding para guiar al usuario paso a paso, con foco en claridad, jerarquía visual y acciones concretas.

Inicio rápido

Tour sirve para explicar funciones clave de una pantalla en pocos pasos. Se controla desde estado externo y se integra con los tokens del design system.

TypeScript

1import { Tour } from 'nave-ui-library/react'
2 
3<Tour
4  currentStep={1}
5  totalSteps={4}
6  title="Bienvenido"
7  description="Te mostramos lo esencial para comenzar."
8  onBack={() => {}}
9  onNext={() => {}}
10/>

Estructura mínima

1/4

Bienvenido

Te mostramos lo esencial para comenzar.

Recorrido controlado por estado

Este patrón es el recomendado: el parent define el paso actual y controla límites de navegación.

1/4

Bienvenido a tu panel

En esta vista podrás seguir ventas, movimientos y alertas operativas.

Variantes de presentación

2/4

Sin flecha superior

Ideal cuando el globo aparece embebido y no anclado a un elemento puntual.

4/4

Paso final

En el último paso puedes deshabilitar siguiente o disparar cierre externo.

Personalización por tokens

Puedes ajustar tipografía, bordes y espaciados por instancia con la prop tokens, manteniendo coherencia con la base del sistema.

TypeScript

1<Tour
2          currentStep={1}
3          totalSteps={4}
4          title="Tour personalizado"
5          description="Con overrides locales."
6          onBack={() => {}}
7          onNext={() => {}}
8          tokens={{
9            components: {
10              tour: {
11                backgroundColor: '#FFFFFF',
12                borderColor: '#E5E7EB',
13                borderRadius: '16px',
14                padding: '20px',
15                title: { fontSize: '18px', fontWeight: 550 },
16                description: { fontSize: '14px', fontWeight: 400 },
17                step: { fontSize: '12px', fontWeight: 550 },
18              },
19            },
20          }}
21        />

Referencia de props

Prop	Tipo	Default	Descripción
currentStep	`number`	`required`	Paso actual (indexado desde 1).
totalSteps	`number`	`required`	Cantidad total de pasos del recorrido.
title / description	`ReactNode`	`required`	Contenido principal del paso.
onBack / onNext	`() => void`	`required`	Callbacks de navegación.
backLabel / nextLabel	`ReactNode`	`'Atras' / 'Siguiente'`	Permite personalizar texto de botones.
disableBack / disableNext	`boolean`	`false`	Bloquea acciones cuando corresponda.
showPointer	`boolean`	`true`	Muestra/oculta la flecha superior del globo.
tokens	`Partial<ThemeTokensBase>`	`undefined`	Override local de estilos sin tocar el tema global.

Recomendaciones de uso

Buenas prácticas

Usar entre 3 y 6 pasos para mantener foco.
Una acción principal por paso.
Descripciones cortas, orientadas a tarea.

Evitar

Texto largo que compita con la pantalla.
Bloquear avance sin feedback claro.
Mostrar tour en cada visita sin condición.

Definición en el registry

Configuración técnica del componente tour para renderizado dinámico en el catálogo.

TypeScript

1{
2  "name": "Tour",
3  "description": "Componente de onboarding para guiar usuarios paso a paso con titulo, descripcion y acciones.",
4  "component": "Tour",
5  "files": [
6    "components/base/navegation/Tour.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "currentStep": {
13      "type": "number",
14      "required": true,
15      "description": "Paso actual mostrado en el indicador superior."
16    },
17    "totalSteps": {
18      "type": "number",
19      "required": true,
20      "description": "Cantidad total de pasos del flujo."
21    },
22    "title": {
23      "type": "React.ReactNode",
24      "required": true,
25      "description": "Titulo principal del paso."
26    },
27    "description": {
28      "type": "React.ReactNode",
29      "required": true,
30      "description": "Texto descriptivo del paso."
31    },
32    "onBack": {
33      "type": "() => void",
34      "required": true,
35      "description": "Callback del boton atras."
36    },
37    "onNext": {
38      "type": "() => void",
39      "required": true,
40      "description": "Callback del boton siguiente."
41    },
42    "backLabel": {
43      "type": "React.ReactNode",
44      "default": "Atras",
45      "description": "Texto del boton atras."
46    },
47    "nextLabel": {
48      "type": "React.ReactNode",
49      "default": "Siguiente",
50      "description": "Texto del boton siguiente."
51    },
52    "showPointer": {
53      "type": "boolean",
54      "default": true,
55      "description": "Muestra la flecha superior del tour."
56    }
57  }
58}

Inicio rápido

Tour sirve para explicar funciones clave de una pantalla en pocos pasos. Se controla desde estado externo y se integra con los tokens del design system.

TypeScript

1import { Tour } from 'nave-ui-library/react'
2 
3<Tour
4  currentStep={1}
5  totalSteps={4}
6  title="Bienvenido"
7  description="Te mostramos lo esencial para comenzar."
8  onBack={() => {}}
9  onNext={() => {}}
10/>

Personalización por tokens

Puedes ajustar tipografía, bordes y espaciados por instancia con la prop tokens, manteniendo coherencia con la base del sistema.

TypeScript

1<Tour
2          currentStep={1}
3          totalSteps={4}
4          title="Tour personalizado"
5          description="Con overrides locales."
6          onBack={() => {}}
7          onNext={() => {}}
8          tokens={{
9            components: {
10              tour: {
11                backgroundColor: '#FFFFFF',
12                borderColor: '#E5E7EB',
13                borderRadius: '16px',
14                padding: '20px',
15                title: { fontSize: '18px', fontWeight: 550 },
16                description: { fontSize: '14px', fontWeight: 400 },
17                step: { fontSize: '12px', fontWeight: 550 },
18              },
19            },
20          }}
21        />

Referencia de props

Prop	Tipo	Default	Descripción
currentStep	`number`	`required`	Paso actual (indexado desde 1).
totalSteps	`number`	`required`	Cantidad total de pasos del recorrido.
title / description	`ReactNode`	`required`	Contenido principal del paso.
onBack / onNext	`() => void`	`required`	Callbacks de navegación.
backLabel / nextLabel	`ReactNode`	`'Atras' / 'Siguiente'`	Permite personalizar texto de botones.
disableBack / disableNext	`boolean`	`false`	Bloquea acciones cuando corresponda.
showPointer	`boolean`	`true`	Muestra/oculta la flecha superior del globo.
tokens	`Partial<ThemeTokensBase>`	`undefined`	Override local de estilos sin tocar el tema global.

Definición en el registry

Configuración técnica del componente tour para renderizado dinámico en el catálogo.

TypeScript

1{
2  "name": "Tour",
3  "description": "Componente de onboarding para guiar usuarios paso a paso con titulo, descripcion y acciones.",
4  "component": "Tour",
5  "files": [
6    "components/base/navegation/Tour.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "currentStep": {
13      "type": "number",
14      "required": true,
15      "description": "Paso actual mostrado en el indicador superior."
16    },
17    "totalSteps": {
18      "type": "number",
19      "required": true,
20      "description": "Cantidad total de pasos del flujo."
21    },
22    "title": {
23      "type": "React.ReactNode",
24      "required": true,
25      "description": "Titulo principal del paso."
26    },
27    "description": {
28      "type": "React.ReactNode",
29      "required": true,
30      "description": "Texto descriptivo del paso."
31    },
32    "onBack": {
33      "type": "() => void",
34      "required": true,
35      "description": "Callback del boton atras."
36    },
37    "onNext": {
38      "type": "() => void",
39      "required": true,
40      "description": "Callback del boton siguiente."
41    },
42    "backLabel": {
43      "type": "React.ReactNode",
44      "default": "Atras",
45      "description": "Texto del boton atras."
46    },
47    "nextLabel": {
48      "type": "React.ReactNode",
49      "default": "Siguiente",
50      "description": "Texto del boton siguiente."
51    },
52    "showPointer": {
53      "type": "boolean",
54      "default": true,
55      "description": "Muestra la flecha superior del tour."
56    }
57  }
58}