Avatar

import { Avatar, AvatarStack } from "@grassroot/ui-react";
 
<Avatar name="Alex Mercer" status="online" />
 
<AvatarStack>
  <Avatar name="Alex Mercer" />
  <Avatar name="Rae Kapoor" />
  <Avatar initials="+5" />
</AvatarStack>

<script setup lang="ts">
import { Avatar, AvatarStack } from "@grassroot/ui-vue";
</script>
 
<template>
  <Avatar name="Alex Mercer" status="online" />
  <AvatarStack
 
  >
    <Avatar name="Alex Mercer" />
    <Avatar name="Rae Kapoor" />
    <Avatar initials="+5" />
  </AvatarStack>
</template>

import { Component } from "@angular/core";
import { GrassrootAvatar, GrassrootAvatarStack } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootAvatar, GrassrootAvatarStack],
  template: `
    <grassroot-avatar name="Alex Mercer" status="online" />
    <grassroot-avatar-stack
 
    >
      <grassroot-avatar name="Alex Mercer" />
      <grassroot-avatar name="Rae Kapoor" />
      <grassroot-avatar initials="+5" />
    </grassroot-avatar-stack>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Avatar, AvatarStack } from "@grassroot/ui-svelte";
</script>
 
<Avatar name="Alex Mercer" status="online" />
<AvatarStack
 
>
  <Avatar name="Alex Mercer" />
  <Avatar name="Rae Kapoor" />
  <Avatar initials="+5" />
</AvatarStack>

import { Avatar, AvatarStack } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Avatar name="Alex Mercer" status="online" />
      <AvatarStack
 
      >
        <Avatar name="Alex Mercer" />
        <Avatar name="Rae Kapoor" />
        <Avatar initials="+5" />
      </AvatarStack>
    </>
  );
}