---
title: Tile
description: >-
  Tiles are customizable buttons that allow staff to complete actions quickly.
  Think of them as shortcuts--adding a 10% discount to an order, for example.
  Tiles provide contextual information and let merchants quickly access
  workflows, actions, and information from the smart grid and the top of detail
  pages. They’re dynamic and can change based on surrounding context, such as
  what’s in the cart.
    > Note:
    > The appearance of `destructive` has been updated as of POS 10.0.0 to appear as an active state.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/components/tile'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/components/tile.md'
---

# Tilecomponent

Tiles are customizable buttons that allow staff to complete actions quickly. Think of them as shortcuts--adding a 10% discount to an order, for example. Tiles provide contextual information and let merchants quickly access workflows, actions, and information from the smart grid and the top of detail pages. They’re dynamic and can change based on surrounding context, such as what’s in the cart.

Note

The appearance of `destructive` has been updated as of POS 10.0.0 to appear as an active state.

## Tile

* title

  string

  required

  The text set on the main label of the tile.

* badgeValue

  number

  The number value displayed in the top right corner of the tile.

* destructive

  boolean

  Sets whether or not the tile is in a red destructive appearance.

* enabled

  boolean

  Sets whether or not the tile can be tapped.

* onPress

  () => void

  The callback that is executed when the tile is tapped.

* subtitle

  string

  The text set on the secondary label of the tile.

### Examples

* #### Render a tile on smart grid

  ##### React

  ```tsx
  import React from 'react'
  import { Tile, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

  const TileComponent = () => {
    const api = useApi()
    return (
      <Tile
        title="My app"
        subtitle="Hello world!"
        onPress={() => {
          api.action.presentModal()
        }}
        enabled
      />
    )
  }

  export default reactExtension('pos.home.tile.render', () => {
    return <TileComponent />
  })
  ```

  ##### TS

  ```ts
  import {
    Tile,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.tile.render',
    (root, api) => {
      const tile = root.createComponent(Tile, {
        title: 'My app',
        subtitle: 'Hello world!',
        enabled: true,
        onPress: () => {
          api.action.presentModal();
        },
      });

      root.append(tile);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-07/tile-default.png)