Navigation · Onaris Design System

Tabs

Conmutación entre vistas de un mismo contexto. Tres variantes: underline (default, para navegación de página), pill (para filtros suaves) y solid (segmented, para alternar modos de vista).

Underline (default)

Pill

Solid (segmented)

<Tabs value={tab} onChange={setTab} variant="underline">
  <Tabs.Tab value="articulos" count={128}>Artículos</Tabs.Tab>
  <Tabs.Tab value="familias" count={12}>Familias</Tabs.Tab>
</Tabs>

Prop	Tipo	Default	Descripción
value	string	—	Tab activa (controlado).
onChange	(value) => void	—	Handler de cambio.
variant	'underline' \| 'pill' \| 'solid'	'underline'	Estilo visual.
Tabs.Tab
value	string	—	Identificador de la tab.
count	number	—	Contador opcional.
disabled	boolean	false	Desactiva la tab.

Accordion

Secciones colapsables para organizar contenido extenso (configuración de artículo, FAQs, filtros agrupados). Modo single (solo una abierta) o multiple.

Modo single

Nombre, SKU, descripción y categoría del artículo. Estos datos aparecen en la ficha pública y en el catálogo exportado.

<Accordion type="single" defaultValue="general">
  <Accordion.Item value="general" title="Información general">
    {/* contenido */}
  </Accordion.Item>
</Accordion>

Prop	Tipo	Default	Descripción
type	'single' \| 'multiple'	'single'	Cuántos paneles abiertos a la vez.
defaultValue	string \| string[]	—	Panel(es) abierto(s) al inicio.
collapsible	boolean	true	Permite cerrar todos (solo single).
Accordion.Item
value	string	—	Identificador del panel.
title	string	—	Texto del trigger.

Breadcrumbs

Ruta jerárquica que indica dónde está el usuario y permite subir niveles. Esencial en la navegación profunda de catálogos (Catálogo › Familia › Subfamilia › Artículo).

Estándar

Colapsadorutas largas con menú intermedio

<Breadcrumbs>
  <Breadcrumbs.Item href="/catalogos">Catálogos</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/c/primavera">Primavera 2026</Breadcrumbs.Item>
  <Breadcrumbs.Item current>Algodón orgánico</Breadcrumbs.Item>
</Breadcrumbs>

Prop	Tipo	Default	Descripción
maxItems	number	—	Colapsa el centro si se supera.
separator	ReactNode	chevron	Separador custom.
Breadcrumbs.Item
href	string	—	Destino del enlace.
current	boolean	false	Marca el item actual (no clickable).

Pagination

Navegación entre páginas de resultados. Muestra primera/última, vecinas y elipsis para rangos largos. Acompañar con el rango de resultados visible.

Numerada con info

1–24 de 312

Tamaño sm

<Pagination
  page={1}
  pageCount={13}
  onPageChange={setPage}
  siblingCount={1}
/>

Prop	Tipo	Default	Descripción
page	number	1	Página actual.
pageCount	number	—	Total de páginas.
onPageChange	(page) => void	—	Handler de cambio.
siblingCount	number	1	Vecinas a cada lado de la actual.
size	'sm' \| 'md'	'md'	28 o 32 px por botón.

Tree

Navegación jerárquica expandible. Es la columna vertebral del backoffice de catálogos: árbol de catálogos › familias › subfamilias. Nodo activo con barra accent a la izquierda.

Árbol de catálogo

Primavera 2026 128

Camisetas 42

Pantalones 31

Chinos 12

Vaqueros 19

Accesorios 55

<Tree value={selectedId} onSelect={setSelected}>
  <Tree.Node id="primavera" label="Primavera 2026" count={128}>
    <Tree.Node id="camisetas" label="Camisetas" count={42} />
    <Tree.Node id="pantalones" label="Pantalones">…</Tree.Node>
  </Tree.Node>
</Tree>

Prop	Tipo	Default	Descripción
value	string	—	Id del nodo seleccionado.
onSelect	(id) => void	—	Handler de selección.
defaultExpanded	string[]	—	Nodos abiertos al inicio.
Tree.Node
id	string	—	Identificador único.
label	string	—	Texto del nodo.
icon	ReactNode	—	Icono a la izquierda.
count	number	—	Contador a la derecha.