Lite UI | Avatar

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

Avatar

Avatar is used to display the user's profile, symbol image or icon.

Import

import { Avatar } from '@ma9pie/lite-ui';

Source

components/Avatar.tsx

Examples

Fallback

import { Avatar } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-4 flex-wrap">
      <Avatar src="https://i.pravatar.cc/150?img=11"></Avatar>
      <Avatar></Avatar>
    </div>
  );
};

export default App;

Size

import { Avatar } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-4 flex-wrap">
      <Avatar size="xs" src="https://i.pravatar.cc/150?img=5"></Avatar>
      <Avatar size="sm" src="https://i.pravatar.cc/150?img=11"></Avatar>
      <Avatar size="md" src="https://i.pravatar.cc/150?img=37"></Avatar>
      <Avatar size="lg" src="https://i.pravatar.cc/150?img=49"></Avatar>
      <Avatar size="xl" src="https://i.pravatar.cc/150?img=67"></Avatar>
    </div>
  );
};

export default App;

API

Avatar props

Property	Type	Description	Default
size	xs \| sm \| md \| lg \| xl	Size of Avatar.	"md"
src	string	Image source.	-
alt	string	Image alternate.	""

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on