CardButton

CardButton renders a vertical card with an optional top icon, a multi-line text label, and an optional footer icon badge. It is designed for grid layouts where users select an action or category — similar to a home screen icon grid. Three size presets control the overall card dimensions.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | title | string | Yes | — | Label text displayed below the icon. Supports up to 3 lines. | | onClick | () => void | Yes | — | Callback fired when the card is clicked. | | icon | string | No | — | Icon identifier displayed at the top of the card. | | iconColor | string | No | — | Color of the top icon. | | iconSize | number | No | — | Override size for the top icon in pixels. | | footerIcon | string | No | — | Icon identifier rendered as a badge below the card's bottom edge. | | footerIconColor | string | No | — | Color of the footer icon badge. | | titleColor | string | No | themeColors.text | Color of the label text. | | titleStyle | React.CSSProperties | No | — | Inline styles applied to the label text. | | backgroundColor | string | No | themeColors.light | Background color of the card. | | size | "sm" \| "md" \| "lg" | No | "md" | Controls card dimensions, font size, and icon sizes. | | containerStyle | React.CSSProperties | No | — | Inline styles applied to the inner Touchable container. | | disabled | boolean | No | false | Disables interaction and reduces opacity. |

Usage

Basic

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

export default function Example() {
  return (
    <CardButton
      title="New Order"
      icon="shoppingBag"
      onClick={() => console.log('new order')}
    />
  );
}

Grid of card buttons

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

const actions = [
  { name: 'orders', label: 'Orders', icon: 'list' },
  { name: 'products', label: 'Products', icon: 'box' },
  { name: 'customers', label: 'Customers', icon: 'users' },
];

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

With a footer icon badge

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

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