Las Section Tiles son elementos interactivos de gran superficie diseñados para capturar la atención del usuario en decisiones clave. Se utilizan en lugar de los inputs estándar (como radios o checkboxes) cuando se desea elevar la importancia de una elección dentro de la interfaz, facilitando la interacción táctil y visual.
CC $ 1234567-8 999-1
CC $ 1234567-8 999-1
CC $ 1234567-8 999-1
CC $ 1234567-8 999-1
Paso 1: importá estilos globales y el componente desde la librería.
1import 'nave-ui-library/styles.css'2import { Tile } from 'nave-ui-library/react'Ejemplo base listo para copiar y pegar en una pantalla real.
CC $ 1234567-8 999-1
Props principales del componente Tile.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Tile title. |
description | string | — | Tile description. |
isSelect | boolean | — | Indicates whether the component was selected. |
error | boolean | — | Indicates if the component has an error. |
size | string | small | small | medium. |
onChange | () => void | — | Callback function. |
tokensreq | Partial<ThemeTokensBase> | — | Overrides locales de estilo/tokens por instancia. |
1{2 "name": "Tile",3 "description": "Las Section Tiles son elementos interactivos de gran superficie diseñados para capturar la atención del usuario en decisiones clave.",4 "component": "Tile",5 "files": [6 "components/base/data-entry/selection-controls/Tile.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "required": true,15 "description": "Tile title."16 },17 "description": {18 "type": "string",19 "description": "Tile description."20 },21 "isSelect": {22 "type": "boolean",23 "description": "Indicates whether the component was selected."24 },25 "error": {26 "type": "boolean",27 "description": "Indicates if the component has an error."28 },29 "size": {30 "type": "string",31 "default": "small",32 "description": "small | medium."33 },34 "onChange": {35 "type": "() => void",36 "required": true,37 "description": "Callback function."38 }39 }40}