oa/documentation/avatar/avatar-dot-colors-documentation.md

Dot colors

Avatar dots can have different colors. Set the dotColor prop to primary, info, warning, danger or grey to change the dot color. See code for more details about usage.

<template>
  <VFlex
    flex-wrap="wrap"
    align-items="flex-end"
    row-gap=".5rem"
    column-gap=".25rem"
  >
    <VAvatar
      picture="https://media.cssninja.io/content/avatars/7.jpg"
      size="medium"
      dot
    />
    <VAvatar
      picture="/images/avatars/svg/vuero-1.svg"
      size="medium"
      dot
      dot-color="primary"
    />
    <VAvatar
      picture="https://media.cssninja.io/content/avatars/11.jpg"
      size="medium"
      dot
      dot-color="info"
    />
    <VAvatar
      picture="https://media.cssninja.io/content/avatars/21.jpg"
      size="medium"
      dot
      dot-color="warning"
    />
    <VAvatar
      picture="https://media.cssninja.io/content/avatars/13.jpg"
      size="medium"
      dot
      dot-color="danger"
    />
    <VAvatar
      picture="https://media.cssninja.io/content/avatars/5.jpg"
      size="medium"
      dot
      dot-color="grey"
    />
  </VFlex>
</template>