Components/Product Tile

Product Tile

Touch-friendly grid tile with image, name, price, optional stock badge, and quick-add action. The building block of a PDV product catalog.

Installation

npx @ajax-ui/cli add product-tile

Props

name · price - required identity and amount.
currency "BRL" · locale "pt-BR" - Intl defaults.
image · sku · badge - optional decoration.
stock + lowStockAt - surfaces "Últimas N" / "Esgotado" badges.
variant "compact" | "expanded" · size "sm" | "md" | "lg".
onAdd - when set, the tile renders as a <button>.

Accessibility

Out-of-stock tiles are disabled - keyboard focus skips them.
Image placeholder is aria-hidden - the visible name and price carry the meaning.