Avatar

A pixel-style avatar component for displaying user initials.

?

Name	Category	Description	Type	Default
shape	? Style	Shape	'circle' | 'square'	'circle'
border	? Style	Whether to show border	boolean	true
size	? Size	Size	'large' | 'default' | 'small'	'default'
color	? Color	Custom hex background color	string	—
default	? Slot	Avatar content (e.g. text initials)		—

Basic Usage

Display text initials inside an avatar.

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar>JD</px-avatar>
    <px-avatar>Px</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Sizes

Use size property to set the avatar size.

<template>
  <div class="demo-avatar">
    <px-avatar size="large">LG</px-avatar>
    <px-avatar>DF</px-avatar>
    <px-avatar size="small">SM</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Shapes

Use shape property to switch between circle (default) and square.

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar shape="square">AB</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Border

Use :border="false" to hide the pixel-style border (shown by default).

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar :border="false">AB</px-avatar>
    <px-avatar shape="square">AB</px-avatar>
    <px-avatar shape="square" :border="false">AB</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Status Indicator

Use status property to show an indicator dot. Set to 'online' for green or 'offline' for gray. Omit the prop to hide the indicator.

<template>
  <div class="demo-avatar">
    <px-indicator type="success" :offset="[-4, 4]">
      <px-avatar>AB</px-avatar>
    </px-indicator>
    <px-indicator type="info" :offset="[-4, 4]">
      <px-avatar>JD</px-avatar>
    </px-indicator>
    <px-avatar>Px</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Custom Color

Use color property to set a custom hex background color.

<template>
  <div class="demo-avatar">
    <px-avatar color="#8839ef">AB</px-avatar>
    <px-avatar color="#1e66f5">JD</px-avatar>
    <px-avatar color="#40a02b">Px</px-avatar>
    <px-avatar color="#fe640b" shape="square" border>SK</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>