Avatar

Default

Add an avatar easily and with functionality with the component <s-avatar>

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar>
      <template #text> Lily </template>
    </s-avatar>
    <s-avatar>
      <template #text> Evan You </template>
    </s-avatar>
    <s-avatar>
      <s-icon  name="bx:user" />
    </s-avatar>
    <s-avatar color="primary">
      <s-icon  name="bxs:hot" />
    </s-avatar>
    <s-avatar>
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
  </div>
</template>

Color

Change the color of the compound with the color property, the colors allowed are the main colors of Sax Design and (HEX, RGB)

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar color="primary">
      <template #text> Primary </template>
    </s-avatar>
    <s-avatar color="success">
      <template #text> Success </template>
    </s-avatar>
    <s-avatar color="danger">
      <template #text> Danger </template>
    </s-avatar>
    <s-avatar color="warn">
      <template #text> Warn </template>
    </s-avatar>
    <s-avatar color="dark">
      <template #text> Dark </template>
    </s-avatar>
    <s-avatar color="#7d33ff">
      <template #text> HEX </template>
    </s-avatar>
    <s-avatar color="rgb(59,222,200)">
      <template #text> RGB </template>
    </s-avatar>
  </div>
</template>
<style scoped lang="scss">
.con-avatars {
  .s-avatar-content {
    margin: 10px;
  }
}
</style>

Size

Change the size of the component to the number provided if for example the size value is 60 equivalent to 60px in height and width

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar size="30">
      <template #text> Lily </template>
    </s-avatar>
    <s-avatar size="40" color="text">
      <template #text> Evan You </template>
    </s-avatar>
    <s-avatar color="success">
      <s-icon  name="bx:user" />
    </s-avatar>
    <s-avatar size="60" color="primary" badge badge-color="danger">
      <s-icon  name="bxs:hot" />
    </s-avatar>
    <s-avatar size="70" badge badge-color="success">
      <img src="/avatars/avatar-4.png" alt="" />
    </s-avatar>
  </div>
</template>

Badge

Add a badge to the component with the badge property or the slot

You can also change the color to represent a user status as disconnected or connected with colors such as success or danger, this you do with the badge-color property

There are times when you need to use the avatar in a chat environment and for this you can add the writing property that adds a writing animation

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar badge>
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
    <s-avatar badge badge-color="danger">
      <img src="/avatars/avatar-6.png" alt="" />
    </s-avatar>
    <s-avatar badge badge-color="success">
      <img src="/avatars/avatar-2.png" alt="" />
      <template #badge> 28 </template>
    </s-avatar>
    <s-avatar badge badge-color="warn">
      <img src="/avatars/avatar-8.png" alt="" />
      <template #badge>
        <s-icon  name="bxs:bell-off" />
      </template>
    </s-avatar>
    <s-avatar badge badge-color="danger">
      <img src="/avatars/avatar-9.png" alt="" />
      <template #badge> Off </template>
    </s-avatar>
    <s-avatar writing badge badge-color="primary">
      <img src="/avatars/avatar-3.png" alt="" />
    </s-avatar>
    <s-avatar badge-position="top-right" badge badge-color="#7d33ff">
      <img src="/avatars/avatar-1.png" alt="" />
    </s-avatar>
  </div>
</template>

Auto font and split

If the user has a short name, it is added as it is but if it is a very long text or has several spaces, the text to be displayed will be automatically generated so that it can be seen correctly

The maximum length of characters is 5. When that limit is exceeded, changes are made in the text

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar>
      <template #text> L </template>
    </s-avatar>
    <s-avatar>
      <template #text> Joel </template>
    </s-avatar>
    <s-avatar>
      <template #text> Fanny </template>
    </s-avatar>
    <s-avatar>
      <template #text> Sally Willis </template>
    </s-avatar>
    <s-avatar>
      <template #text> Dakota Roche Brown </template>
    </s-avatar>
    <s-avatar>
      <template #text> Garret Reynolds Enarson Hoffman </template>
    </s-avatar>
  </div>
</template>

Shape

Circle

Change the border-radius of the entire component to 50% with the circle property making it fully circular

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar shape="circle">
      <template #text> Joel </template>
    </s-avatar>
    <s-avatar shape="circle" color="danger">
      <template #text> Fanny </template>
    </s-avatar>
    <s-avatar shape="circle">
      <img src="/avatars/avatar-1.png" alt="" />
    </s-avatar>
    <s-avatar shape="circle" badge>
      <img src="/avatars/avatar-2.png" alt="" />
    </s-avatar>
    <s-avatar shape="circle" badge writing badge-color="success">
      <img src="/avatars/avatar-3.png" alt="" />
    </s-avatar>
    <s-avatar
      badge
      shape="circle"
      badge-color="warn"
      badge-position="top-right"
    >
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
    <s-avatar history history-gradient shape="circle">
      <img src="/avatars/avatar-6.png" alt="" />
    </s-avatar>
  </div>
</template>
<style scoped lang="scss">
.con-avatars {
  .s-avatar-content {
    margin: 10px;
  }
}
</style>

Square

Change the border-radius of the entire component to 0% with the square property making it completely square

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar shape="square">
      <template #text> Joel </template>
    </s-avatar>
    <s-avatar shape="square" color="danger">
      <template #text> Fanny </template>
    </s-avatar>
    <s-avatar shape="square">
      <img src="/avatars/avatar-1.png" alt="" />
    </s-avatar>
    <s-avatar shape="square" badge>
      <img src="/avatars/avatar-2.png" alt="" />
    </s-avatar>
    <s-avatar shape="square" badge writing badge-color="success">
      <img src="/avatars/avatar-3.png" alt="" />
    </s-avatar>
    <s-avatar
      badge
      shape="square"
      badge-color="warn"
      badge-position="top-right"
    >
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
    <s-avatar history history-gradient shape="square">
      <img src="/avatars/avatar-6.png" alt="" />
    </s-avatar>
  </div>
</template>
<style scoped lang="scss">
.con-avatars {
  .s-avatar-content {
    margin: 10px;
  }
}
</style>

History

It generates a border around the avatar, this is usually used to represent that the user is doing an action or in many cases has a History

You can make the border a gradient like instagram with the property history-gradient

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar history>
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>

    <s-avatar history color="primary">
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>

    <s-avatar history color="success">
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>

    <s-avatar history history-gradient>
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
  </div>
</template>

Icon

You can put an icon inside an avatar when for example an image is not yet added or is a new user, for this you can simply use the default slot

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar>
      <s-icon  name="bx:user" />
    </s-avatar>
    <s-avatar>
      <s-icon  name="bxs:camera" />
    </s-avatar>
    <s-avatar>
      <s-icon  name="bx:world" />
    </s-avatar>
    <s-avatar>
      <s-icon  name="bx:support" />
    </s-avatar>
    <s-avatar>
      <s-icon  name="bx:trophy" />
    </s-avatar>
    <s-avatar>
      <s-icon  name="bx:map" />
    </s-avatar>
  </div>
</template>

Loading

Add a loading animation to the component, this property is a boolean so you can add it without any value

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar shape="square">
      <template #text> Joel </template>
    </s-avatar>
    <s-avatar shape="square" color="danger">
      <template #text> Fanny </template>
    </s-avatar>
    <s-avatar shape="square">
      <img src="/avatars/avatar-1.png" alt="" />
    </s-avatar>
    <s-avatar shape="square" badge>
      <img src="/avatars/avatar-2.png" alt="" />
    </s-avatar>
    <s-avatar shape="square" badge writing badge-color="success">
      <img src="/avatars/avatar-3.png" alt="" />
    </s-avatar>
    <s-avatar
      badge
      shape="square"
      badge-color="warn"
      badge-position="top-right"
    >
      <img src="/avatars/avatar-5.png" alt="" />
    </s-avatar>
    <s-avatar history history-gradient shape="square">
      <img src="/avatars/avatar-6.png" alt="" />
    </s-avatar>
  </div>
</template>
<style scoped lang="scss">
.con-avatars {
  .s-avatar-content {
    margin: 10px;
  }
}
</style>

Icons

Add a space next to the avatar with the slot icons where you can put icons for some dynamic action of that user in specific

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar>
      <img src="/avatars/avatar-1.png" alt="" />
      <template #icons>
        <s-icon  name="bxl:facebook-square" />
        <s-icon  name="bxl:github" />
        <s-icon  name="bxl:twitter" />
      </template>
    </s-avatar>
    <s-avatar badge badge-color="danger" badge-position="bottom-left">
      <img src="/avatars/avatar-8.png" alt="" />
      <template #icons>
        <s-icon  name="bxl:twitch" />
        <s-icon  name="bxl:discord" />
      </template>
    </s-avatar>
    <s-avatar loading badge badge-color="success" badge-position="top-left">
      <img src="/avatars/avatar-2.png" alt="" />
      <template #icons>
        <s-icon  name="bxl:patreon" />
        <s-icon  name="bxl:linkedin-square" />
        <s-icon  name="bx:link" />
      </template>
    </s-avatar>
  </div>
</template>

Group

You can group several avatar with the parent component s-avatar-group, this component has two interesting properties:

• max: determine the maximum number of avatars to show and the rest hides it generating the number in the last avatar shown

• float: causes the avatar components to be placed on each other and the grouping of one on top of the other is eliminated

Code copied

<template>
  <div class="center con-avatars">
    <s-avatar-group max="7">
      <s-avatar>
        <img src="/avatars/avatar-1.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-6.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-2.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-7.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-3.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-8.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-4.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-9.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-10.png" alt="" />
      </s-avatar>
    </s-avatar-group>

    <s-avatar-group float max="8">
      <s-avatar>
        <img src="/avatars/avatar-1.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-6.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-2.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-7.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-3.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-8.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-4.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-9.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
      <s-avatar>
        <img src="/avatars/avatar-10.png" alt="" />
      </s-avatar>
    </s-avatar-group>
  </div>
</template>

API