Avatar
Avatar — image, initials, or icon, in that order of preference.
Try it
Omer Chetin
Knobs
size shape status <script> import { Avatar } from 'omaris';</script><Avatar name="Omer Chetin" />Walkthrough
1. Fallbacks
Image, then initials, then an icon — in that order of preference, so a missing photo degrades instead of leaving a hole.
Omer Chetin Amina Yusuf RH
<script lang="ts"> import { Avatar } from 'omaris';</script><Avatar name="Omer Chetin" /><Avatar name="Amina Yusuf" colorize /><Avatar initials="RH" colorize /><Avatar> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <circle cx="12" cy="8" r="3.5" /> <path d="M4.5 20a7.5 7.5 0 0 1 15 0" stroke-linecap="round" /> </svg></Avatar>2. Sizes shapes status
xs and sm for a table cell or a chip, lg and xl for a profile header; square for an organisation, a status dot for presence.
Hevi Salih Hevi Salih Hevi Salih Hevi Salih Hevi Salih Karwan Ali Dilan Karim Rania Hadi
<script lang="ts"> import { Avatar } from 'omaris';</script><Avatar size="xs" name="Hevi Salih" colorize /><Avatar size="sm" name="Hevi Salih" colorize /><Avatar size="md" name="Hevi Salih" colorize /><Avatar size="lg" name="Hevi Salih" colorize /><Avatar size="xl" name="Hevi Salih" colorize /><Avatar shape="square" name="Karwan Ali" colorize /><Avatar name="Dilan Karim" colorize status="online" /><Avatar name="Rania Hadi" colorize status="busy" />3. Group
Give the group the same size as the avatars, or the overlap will not match.
Amina Yusuf Dilan Karim Hevi Salih Karwan Ali
Amina Yusuf Dilan Karim Hevi Salih
<script lang="ts"> import { Avatar, AvatarGroup } from 'omaris';</script><AvatarGroup overflow={12}> <Avatar name="Amina Yusuf" colorize /> <Avatar name="Dilan Karim" colorize /> <Avatar name="Hevi Salih" colorize /> <Avatar name="Karwan Ali" colorize /></AvatarGroup><AvatarGroup size="sm"> <Avatar size="sm" name="Amina Yusuf" colorize /> <Avatar size="sm" name="Dilan Karim" colorize /> <Avatar size="sm" name="Hevi Salih" colorize /></AvatarGroup>