Styled UI Library

Components

Avatar

An avatar serves as a visual representation of a user or entity.

Examples

link

Default

An avatar can be rounded or squared depending on usage. The default is rounded. The following props are available: a title as mandatory prop and size, isSquared, status, src, alt as optional props. Image avatars can be created by passing standard src prop to the component. Initials, which come from the title prop are displayed for avatars when a chosen source is unavailable (for example, when there is a problem displaying the image due to an error), or simply unspecified.

JD
import { Avatar } from '@millanbrankovic/styled-ui-library';

function DefaultAvatarExample() {
  return (
    <Avatar title='John Doe' />
  );
};

export default DefaultAvatarExample;
link

Size

Small, Default, Medium, Large, XLarge

Avatars are available in five sizes: small (24px x 24px), medium (48px x 48px), large (72px x 72px), and xlarge (96px x 96px), which can be specified using the respective size prop, with the default size being 36px x 36px.

infoinfo

NOTE

Avatar will have a default size of 36px x 36px if no size prop is passed.

SA
DA
MA
LA
XA
import { Avatar } from '@millanbrankovic/styled-ui-library';

function SizeAvatarExample() {
  return (
    <Avatar title='Small Avatar' size='small' />
    <Avatar title='Default Avatar' />
    <Avatar title='Medium Avatar' size='medium' />
    <Avatar title='Large Avatar' size='large' />
    <Avatar title='Xlarge Avatar' size='xlarge' />
  );
};

export default SizeAvatarExample;
link

Appearance

Round

As already mentioned, a default avatar is rounded without providing any specific props.

JD
import { Avatar } from '@millanbrankovic/styled-ui-library';

function RoundAvatarExample() {
  return (
    <Avatar title='John Doe' />
  );
};

export default RoundAvatarExample;
link

Square

isSquared is an optional boolean prop that visually changes the look of the avatar from a rounded shape to squared.

JD
import { Avatar } from '@millanbrankovic/styled-ui-library';

function SquareAvatarExample() {
  return (
    <Avatar title='John Doe' isSquared />
  );
};

export default SquareAvatarExample;
link

Status

Online, Away, Busy, Offline

Avatars are available in four different statuses: online, away, busy, and offline, which can be specified using the respective status prop

OS
AS
BS
OS
SO
SA
SB
SO
import { Avatar } from '@millanbrankovic/styled-ui-library';

function StatusAvatarExample() {
  return (
    <Avatar title='Online Status' status='online' />
    <Avatar title='Away Status' status='away' />
    <Avatar title='Busy Status' status='busy' />
    <Avatar title='Offline Status' status='offline' />
    <Avatar title='Squared Online' status='online' isSquared />
    <Avatar title='Squared Away' status='away' isSquared />
    <Avatar title='Squared Busy' status='busy' isSquared />
    <Avatar title='Squared Offline' status='offline' isSquared />
  );
};

export default StatusAvatarExample;
link

Image Avatar

Default & Squared

Passing standard src prop to the component allows for the creation of image avatars. alt prop is optional, if not passed or left empty, it will read a value from the title prop.

Image Avatar
import { Avatar } from '@millanbrankovic/styled-ui-library';

function ImageExample() {
  return (
    <Avatar
      src='https://picsum.photos/id/64/320/320'
      title='Jessica Doe'
      alt='Image Avatar'
      size={size}
    />
  );
};

export default ImageExample;
link

With Status

Image avatars can also have a status: 'online' | 'away' | 'busy' | 'offline'

Image Avatar
import { Avatar } from '@millanbrankovic/styled-ui-library';

function ImageStatusExample() {
  return (
    <Avatar
      src='https://picsum.photos/id/64/320/320'
      title='Jessica Doe'
      alt='Image Avatar'
      status={status}
    />
  );
};

export default ImageStatusExample;