Choose a version:

Tile
component

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.

Anchor to tileTile

Anchor to title title string required: The text set on the main label of the tile.
Anchor to badgeValue badgeValue number: The number value displayed in the top right corner of the tile.
Anchor to destructive destructive boolean: Sets whether or not the tile is in a red destructive appearance.
Anchor to enabled enabled boolean: Sets whether or not the tile can be tapped.
Anchor to onPress onPress () => void: The callback that is executed when the tile is tapped.
Anchor to subtitle subtitle string: The text set on the secondary label of the tile.

TileProps

badgeValue
The number value displayed in the top right corner of the tile.
```
number
```
destructive
Sets whether or not the tile is in a red destructive appearance.
```
boolean
```
enabled
Sets whether or not the tile can be tapped.
```
boolean
```
onPress
The callback that is executed when the tile is tapped.
```
() => void
```
subtitle
The text set on the secondary label of the tile.
```
string
```
title
The text set on the main label of the tile.
```
string
```

export interface TileProps {
  /**
   * The text set on the main label of the tile.
   */
  title: string;
  /**
   * The text set on the secondary label of the tile.
   */
  subtitle?: string;
  /**
   * Sets whether or not the tile can be tapped.
   */
  enabled?: boolean;
  /**
   * Sets whether or not the tile is in a red destructive appearance.
   */
  destructive?: boolean;
  /**
   * The number value displayed in the top right corner of the tile.
   */
  badgeValue?: number;
  /**
   * The callback that is executed when the tile is tapped.
   */
  onPress?: () => void;
}

Was this section helpful?

Render a tile on smart grid

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 />

})

examples

Render a tile on smart grid

React

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

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);
  },
);

Tilecomponent

Anchor to tileTile

TileProps

examples

Render a tile on smart grid

React

TS

Preview

Tile
component