Avatar

An avatar is a graphical representation of a user: usually a photo, illustration, or initial.

Basic

There are 3 variants types of avatar: default, image, and letter

Source Code

import { Avatar } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Basic() {
  return (
    <div className="flex gap-x-4">
      {/* Default */}
      <Avatar />

      {/* Image */}
      <Avatar src={'/images/components/SelectionAndInput/Avatar/Avatar.png'} alt={'image'} />

Sizes

Avatar supports 7 sizes 2xs, xs, sm, md, lg, xl and responsive and can be changed by passing the size prop.
Default size is md.

Source Code

import { Avatar } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Sizes() {
  return (
    <div className="flex gap-x-4">
      <Avatar size={'2xs'} />
      <Avatar size={'xs'} />
      <Avatar size={'sm'} />
      <Avatar size={'md'} />
      <Avatar size={'lg'} />
      <Avatar size={'xl'} />

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import { Avatar } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function ResponsiveSize() {
  return (
    <div className="flex gap-x-4">
      <Avatar size={'responsive'} />
    </div>
  );
}

Colors

Avatar allows changed background color of default and letter type by using style or className prop.

Source Code

import { Avatar } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Colors() {
  return (
    <div className="flex gap-x-4">
      <Avatar />
      <Avatar style={{ background: '#7B49B8' }} />
      <Avatar style={{ background: '#7B49B8' }}>LA</Avatar>
    </div>
  );
}

Grouped

AvatarGroup renders its children as a stack. Use the max prop to limit the number of Avatars.
Each Avatar component will have alt prop, it will be using for the alt attribute of the image and the label of the Avatar on overflow items.

Source Code

import { Avatar, AvatarGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { mockAvatarItems } from '../../utils/Avatar/helpers';

export function AvatarGroupBasic() {
  return (
    <AvatarGroup size="md" max={5}>
      {mockAvatarItems.map((item, index) => (
        <Avatar key={index} alt={item.alt} src={item.src} />
      ))}
    </AvatarGroup>

Sizes

AvatarGroup supports 4 sizes xs, sm, md and responsive and can be changed by passing the size prop.
Default size is md.

Source Code

import { Avatar, AvatarGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { mockAvatarItems } from '../../utils/Avatar/helpers';

export function AvatarGroupSize() {
  return (
    <div className="flex flex-col gap-8">
      <AvatarGroup size={'xs'} max={5}>
        {mockAvatarItems.map((item, index) => (
          <Avatar key={index} alt={item.alt} src={item.src} />
        ))}

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import { Avatar, AvatarGroup } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { mockAvatarItems } from '../../utils/Avatar/helpers';

export function AvatarGroupResponsiveSize() {
  return (
    <div className="flex justify-start gap-5">
      <AvatarGroup size={'responsive'} max={5}>
        {mockAvatarItems.map((item, index) => (
          <Avatar key={index} alt={item.alt} src={item.src} />
        ))}

Source Code

import {
  Avatar,
  AvatarGroup,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { mockAvatarItems } from '../../utils/Avatar/helpers';

export function AvatarGroupWithTooltip() {

Was this page helpful?

Avatar

Basic

Sizes

Colors

Grouped

Sizes

Customize with tooltip