Entity Avatar

Display a specialised entity avatar with an auto generated color block.

Usage

Used as an identifier for a user's created entities in the compute console. A fixed color will be generated based on the id prop passed.

Index 0

red → pink (600, 400)

ID: "D"

Index 1

rose → orange (500, 400)

ID: "E"

Index 2

orange → yellow (600, 400)

ID: "F"

Index 3

amber → lime (600, 400)

ID: "G"

Index 4

lime → green (600, 400)

ID: "H"

Index 5

green → teal (600, 400)

ID: "I"

Index 6

emerald → cyan (600, 300)

ID: "J"

Index 7

teal → blue (600, 400)

ID: "K"

Index 8

cyan → sky (600, 400)

ID: "L"

Index 9

sky → indigo (500, 600)

ID: "M"

Index 10

blue → cyan (700, 300)

ID: "N"

Index 11

indigo → purple (600, 400)

ID: "O"

Index 12

violet → fuchsia (600, 400)

ID: "P"

Index 13

purple → pink (600, 400)

ID: "Q"

Index 14

fuschia → pink (600, 400)

ID: "R"

Index 15

pink → rose (600, 400)

ID: "S"

Index 16

rose → red (600, 400)

ID: "T"

<script setup>
// Calculated test strings to produce each gradient index (0-16)
// For single char strings: hash = char.charCodeAt(0) % 17
// Index 0: need char with ASCII % 17 = 0 → ASCII 17, 34, 51, 68, 85... → 'D' (68)
// Index 1: need char with ASCII % 17 = 1 → ASCII 18, 35, 52, 69, 86... → 'E' (69)
const gradientTests = [
  { id: 'D', gradient: 'red → pink (600, 400)', index: 0 }, // 68 % 17 = 0
  { id: 'E', gradient: 'rose → orange (500, 400)', index: 1 }, // 69 % 17 = 1
  { id: 'F', gradient: 'orange → yellow (600, 400)', index: 2 }, // 70 % 17 = 2
  { id: 'G', gradient: 'amber → lime (600, 400)', index: 3 }, // 71 % 17 = 3
  { id: 'H', gradient: 'lime → green (600, 400)', index: 4 }, // 72 % 17 = 4
  { id: 'I', gradient: 'green → teal (600, 400)', index: 5 }, // 73 % 17 = 5
  { id: 'J', gradient: 'emerald → cyan (600, 300)', index: 6 }, // 74 % 17 = 6
  { id: 'K', gradient: 'teal → blue (600, 400)', index: 7 }, // 75 % 17 = 7
  { id: 'L', gradient: 'cyan → sky (600, 400)', index: 8 }, // 76 % 17 = 8
  { id: 'M', gradient: 'sky → indigo (500, 600)', index: 9 }, // 77 % 17 = 9
  { id: 'N', gradient: 'blue → cyan (700, 300)', index: 10 }, // 78 % 17 = 10
  { id: 'O', gradient: 'indigo → purple (600, 400)', index: 11 }, // 79 % 17 = 11
  { id: 'P', gradient: 'violet → fuchsia (600, 400)', index: 12 }, // 80 % 17 = 12
  { id: 'Q', gradient: 'purple → pink (600, 400)', index: 13 }, // 81 % 17 = 13
  { id: 'R', gradient: 'fuschia → pink (600, 400)', index: 14 }, // 82 % 17 = 14
  { id: 'S', gradient: 'pink → rose (600, 400)', index: 15 }, // 83 % 17 = 15
  { id: 'T', gradient: 'rose → red (600, 400)', index: 16 }, // 84 % 17 = 16
]
</script>

<template>
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
    <div
      v-for="test in gradientTests"
      :key="test.id"
      class="flex flex-col items-center border border-canvas-200 rounded-lg p-4 space-y-3 dark:border-canvas-700"
    >
      <CEntityAvatar
        :id="test.id"
        type="billing-account"
      />
      <div class="text-center">
        <div class="text-sm text-canvas-900 font-medium dark:text-canvas-100">
          Index {{ test.index }}
        </div>
        <div class="mt-1 text-xs text-canvas-600 dark:text-canvas-400">
          {{ test.gradient }}
        </div>
        <div class="mt-1 text-xs text-canvas-500 dark:text-canvas-500">
          ID: "{{ test.id }}"
        </div>
      </div>
    </div>
  </div>
</template>

Type

Use the type prop to adjust the entity type.

type

<template>
<CEntityAvatar type="virtual-machine" id="example123" />
</template>

ID

Use the id prop to generate a fixed color.

<template>
<CEntityAvatar id="entity89" type="billing-account" />
</template>

Loading

<template>
<CEntityAvatar loading id="example123" type="billing-account" />
</template>

Props

typerequired

string

boolean