---
title: Tile
description: Customizable buttons that allow merchants to complete actions quickly. Tiles provide contextual information and let merchants 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.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/tile
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/tile.md
---

# Tile

Customizable buttons that allow merchants to complete actions quickly. Tiles provide contextual information and let merchants 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.

## Properties

* disabled

  boolean

  Default: false

  Disables the Tile meaning it cannot be clicked or receive focus.

* heading

  string

  Default: ''

  A title that describes the content of the Tile.

* id

  string

  A unique identifier for the element.

* itemCount

  number

  A numeric indicator rendered within the Tile (for example, a count or a step number).

  * When provided, the indicator is displayed inside the tile.
  * Intended for small integers. It may clamp, truncate, or abbreviate larger values.

* subheading

  string

  Default: ''

  Supporting text displayed below the heading.

* tone

  'auto' | 'neutral' | 'accent'

  Default: 'auto'

  Sets the tone of the Tile, based on the intention of the information being conveyed.

## Events

* click

  (event: CallbackEvent<"s-tile">) => void

  Callback when the Tile is activated.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-tile heading="Extension title" subheading="Subtitle" />
  <s-tile heading="Extension title" subheading="Subtitle" tone="accent" />
  ```

## Preview

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