Skip to main content

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.

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

Preview