Accessibility: Not Needed

Translations: Not Needed

Migration Guide: Not Needed

Swatch Tile

A color swatch component that displays interactive color samples.

Default

Vue

<template>
  <HLSwatchTile value="#D9D6FE" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Square Shape (Default)

Vue

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="square" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Round Shape

Vue

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="circle" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Rectangle Shape

Vue

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="rectangle" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Different Colors and Sizes

Vue

<template>
  <HLSwatchTile value="#FF5733" size="3xs" />
  <HLSwatchTile value="#33FF57" size="2xs" />
  <HLSwatchTile value="#3357FF" size="xs" shape="circle" />
  <HLSwatchTile value="#FF5733" size="sm" shape="circle" />
  <HLSwatchTile value="#33FF57" size="md" shape="rectangle" />
  <HLSwatchTile value="#3357FF" size="lg" shape="rectangle" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Interactive States

Vue

<template>
  <HLSwatchTile value="#D9D6FE77" size="md" />
  <HLSwatchTile value="#D9D6FE77" size="md" tabindex="0" />
</template>
<script setup>
  import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Imports

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

Props

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the swatch tile
value	string | undefined	'#D9D6FE77'	Color value (hex, rgb, or name)
size	'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg'	'md'	Size of the swatch tile
shape	'square' | 'round' | 'rectangle'	'square'	Shape of the swatch tile

Emits

Name	Parameters	Description
@click	(event: Event) => void	Triggered when the swatch is clicked