Accessibility: Full

Translations: Not Needed

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.

Vue

<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>
  import { HLTile, HLSpace } from '@platform-ui/highrise'
  import { Atom02Icon, Image01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

States

Tiles can be selected or disabled.

Vue

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

Custom Content

Use the content slot to provide custom content.

Vue

<template>
  <HLTile id="tile-custom" class="hl-tile__custom">
    <template #content>
      <p>Custom content</p>
    </template>
  </HLTile>
</template>

Custom Icon

Use the icon slot to provide a custom icon.

Vue

<template>
  <HLTile id="tile-custom-icon" label="Custom Icon">
    <template #icon>
      <img :src="viteIcon" class="h-[20px]" />
    </template>
  </HLTile>
</template>
<script setup>
  import { HLTile } from '@platform-ui/highrise'
  import viteIcon from '@platform-ui/highrise/static/svg/vite.svg'
</script>

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
size	'small'	'small'	Size of the tile (future support for more sizes)
class	string	undefined	Additional CSS classes

Slots

Name	Parameters	Description
default	()	Default slot for basic content
content	()	Slot for custom content that replaces default layout
icon	()	Slot for custom icon content