Avatar

An image element with a fallback for representing the user.

Jane Doe

import { Avatar, Box } from '@nox-ui/react';

const AvatarDemo = () => {
  return (
    <Box css={{ d: 'flex', gap: '$4' }}>
      <Avatar src="https://images.unsplash.com/photo-1597586124394-fbd6ef244026?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
        Jane Doe
      </Avatar>
      <Avatar src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80">
        Jane Doe
      </Avatar>
      <Avatar src="">Jane Doe</Avatar>
    </Box>
  );
};

Sizes

The avatar comes in 3 different sizes: small, medium and large.

Jane Doe

You can always set the custom size with the css prop. Make sure to set font-size accordingly (if using fallback).

Jane Doe

Color

To give the avatar a background color when falling back or using with the bordered prop set to true, use the color prop. Custom colors can be set using the css prop.

JD JD

Jane Doe

Gradient

To give the avatar a gradient border use bordered prop alongside color="gradient".

Hovering

To make the avatar use the hoverable prop.