Choose a version:

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.

Anchor to propertiesProperties

Anchor to disabled disabled boolean Default: false: Disables the Tile meaning it cannot be clicked or receive focus.
Anchor to heading heading string Default: '': A title that describes the content of the Tile.
Anchor to id id string: A unique identifier for the element.
Anchor to itemCount 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.
Anchor to subheading subheading string Default: '': Supporting text displayed below the heading.
Anchor to tone tone 'auto' | 'neutral' | 'accent' Default: 'auto': Sets the tone of the Tile, based on the intention of the information being conveyed.

Was this section helpful?

Anchor to eventsEvents

Anchor to click click (event: <"s-tile">) => void: Callback when the Tile is activated.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

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

Was this section helpful?

Code

<s-tile heading="Extension title" subheading="Subtitle" />

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

Tile

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEvent

Code

Examples

Code

Default

Preview