RTL Support: Full

Accessibility: Full

Translations: Not Needed

Try in Cursor

Tile

A clickable tile component that can display an icon and label, or custom content.

Basic Usage

Use Tile to create a clickable element with an icon and optional label.

Basic

With Label

<template>
  <HLSpace>
    <HLTile id="tile-basic-1" :icon="Atom02Icon" label="Basic" />
    <HLTile id="tile-basic-2" :icon="Image01Icon" label="With Label" />
    <HLTile id="tile-basic-3" :icon="Atom02Icon" />
  </HLSpace>
</template>
<script setup lang="ts">
import { HLTile, HLSpace } from '@platform-ui/highrise'
import { Atom02Icon, Image01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

States

Tiles can be selected or disabled.

Normal

Selected

Disabled

<template>
  <HLSpace>
    <HLTile id="tile-state-1" :icon="Atom02Icon" label="Normal" />
    <HLTile id="tile-state-2" :icon="Atom02Icon" label="Selected" selected />
    <HLTile id="tile-state-3" :icon="Atom02Icon" label="Disabled" disabled />
  </HLSpace>
</template>
<script setup lang="ts">
import { HLTile, HLSpace } from '@platform-ui/highrise'
import { Atom02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Custom Content

Use the content slot to provide custom content.

Custom content

<template>
  <HLTile id="tile-custom" customClass="hl-tile__custom">
    <template #content>
      <p>Custom content</p>
    </template>
  </HLTile>
</template>
<script setup lang="ts">
import { HLTile } from '@platform-ui/highrise'
</script>

Custom Icon

Use the icon slot to provide a custom icon.

Custom Icon

<template>
  <HLTile id="tile-custom-icon" label="Custom Icon">
    <template #icon>
      <img src="https://api.dicebear.com/9.x/icons/svg?seed=tile" alt="Custom icon" class="h-[20px] w-[20px]" />
    </template>
  </HLTile>
</template>
<script setup lang="ts">
import { HLTile } from '@platform-ui/highrise'
</script>

Event Testing

Handle click to make a tile actionable — the usual pattern is a group of tiles where clicking one selects it. The event fires for mouse clicks and for Enter or Space when the tile has keyboard focus, so the same handler covers both without extra work. focus and blur fire as the tile enters and leaves focus.

Click a tile below, or tab to one and press Enter or Space. The disabled tile emits nothing.

Grid

Gallery

Disabled

Event Log:

No events yet. Click a tile, or tab to one and press Enter.

<template>
  <HLSpace>
    <HLTile
      id="tile-event-grid"
      :icon="Atom02Icon"
      label="Grid"
      :selected="selected === 'grid'"
      @click="selected = 'grid'"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    <HLTile
      id="tile-event-gallery"
      :icon="Image01Icon"
      label="Gallery"
      :selected="selected === 'gallery'"
      @click="selected = 'gallery'"
      @focus="handleFocus"
      @blur="handleBlur"
    />

    <!-- A disabled tile emits nothing, so this handler never runs -->
    <HLTile id="tile-event-disabled" :icon="Atom02Icon" label="Disabled" disabled @click="selected = 'disabled'" />
  </HLSpace>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HLTile, HLSpace } from '@platform-ui/highrise'
import { Atom02Icon, Image01Icon } from '@gohighlevel/ghl-icons/24/outline'

const selected = ref('grid')

// `click` receives a MouseEvent for pointer activation, or a KeyboardEvent for Enter / Space
const handleFocus = (event: FocusEvent) => console.log('focused', event.target)
const handleBlur = (event: FocusEvent) => console.log('blurred', event.target)
</script>

INFO

A disabled tile is also removed from the tab order and drops its button role, so keyboard users can't reach it either — you don't need to guard your handler separately.

Accessibility

• Promote interactive tiles to role="article" / role="region" and connect their title via aria-labelledby.
• If the whole tile is clickable, add an aria-label summarizing the action or wrap it in a semantic link/button component.

Imports

import { HLTile } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string	-	The unique identifier for the tile
label	string	null	Text label to display below the icon
icon	Function	null	Icon component to display
selected	boolean	false	Whether the tile is in selected state
disabled	boolean	false	Whether the tile is disabled
customClass	string	undefined	Additional CSS classes applied to the tile root

Emits

Name	Parameters	Description
click	(event: MouseEvent | KeyboardEvent)	Emitted when the tile is activated by click, Enter, or Space. Not emitted while disabled.
focus	(event: FocusEvent)	Emitted when the tile receives focus
blur	(event: FocusEvent)	Emitted when the tile loses focus

Slots

Name	Parameters	Description
default	()	Default slot for basic content
content	()	Custom content that replaces the default icon/label layout; the icon and label props are ignored when this slot is used
icon	()	Slot for custom icon content