CardButton

CardButton renderiza una tarjeta vertical con un ícono opcional en la parte superior, una etiqueta de texto multilínea y un ícono de insignia opcional en el pie. Está diseñado para layouts en cuadrícula donde los usuarios seleccionan una acción o categoría — similar a una cuadrícula de íconos de pantalla de inicio. Tres presets de tamaño controlan las dimensiones generales de la tarjeta.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | title | string | Sí | — | Texto de la etiqueta que se muestra debajo del ícono. Soporta hasta 3 líneas. | | onClick | () => void | Sí | — | Callback que se dispara cuando se hace clic en la tarjeta. | | icon | string | No | — | Identificador del ícono mostrado en la parte superior de la tarjeta. | | iconColor | string | No | — | Color del ícono superior. | | iconSize | number | No | — | Tamaño en píxeles para sobreescribir el ícono superior. | | footerIcon | string | No | — | Identificador del ícono renderizado como insignia debajo del borde inferior de la tarjeta. | | footerIconColor | string | No | — | Color de la insignia del ícono del pie. | | titleColor | string | No | themeColors.text | Color del texto de la etiqueta. | | titleStyle | React.CSSProperties | No | — | Estilos en línea aplicados al texto de la etiqueta. | | backgroundColor | string | No | themeColors.light | Color de fondo de la tarjeta. | | size | "sm" \| "md" \| "lg" | No | "md" | Controla las dimensiones de la tarjeta, el tamaño de fuente y los tamaños de íconos. | | containerStyle | React.CSSProperties | No | — | Estilos en línea aplicados al contenedor Touchable interior. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. |

Uso

Básico

import CardButton from '@/components/buttons/CardButton';

export default function Example() {
  return (
    <CardButton
      title="Nuevo pedido"
      icon="shoppingBag"
      onClick={() => console.log('nuevo pedido')}
    />
  );
}

Cuadrícula de tarjetas

import CardButton from '@/components/buttons/CardButton';

const acciones = [
  { name: 'orders', label: 'Pedidos', icon: 'list' },
  { name: 'products', label: 'Productos', icon: 'box' },
  { name: 'customers', label: 'Clientes', icon: 'users' },
];

export default function ActionGrid() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      {acciones.map((accion) => (
        <CardButton
          key={accion.name}
          title={accion.label}
          icon={accion.icon}
          size="lg"
          onClick={() => console.log(accion.name)}
        />
      ))}
    </div>
  );
}

Con ícono de insignia en el pie

import CardButton from '@/components/buttons/CardButton';

export default function Example() {
  return (
    <CardButton
      title="Notificaciones"
      icon="bell"
      footerIcon="alert"
      footerIconColor="red"
      onClick={() => {}}
    />
  );
}