# Avatar Display an image or initials as an avatar. ```blade ``` ## Tooltip Use the `tooltip` prop to display a tooltip when hovering over the avatar. ```blade ``` ## Initials When no `src` is provided, the `name` prop will be used to automatically generate initials. You can also use the `initials` prop directly. ```blade ``` ## Size Use the `size` prop to change the size of the avatar. ```blade ``` ## Icon Use the `icon` prop to display an icon instead of an image. ```blade ``` ## Colors Use the `color` prop to change the color of the avatar. ```blade ``` ## Auto color Deterministically generate a color based on a user's name. ```blade ``` ## Circle Use the `circle` prop to make the avatar circular. ```blade ``` ## Badge Add badges to avatars in various ways. Use the `badge` prop by itself for a simple dot indicator, provide content like numbers or emojis, or even pass in custom HTML via a slot. ```blade ``` ## Groups Stack avatars together. By default, grouped avatars have rings that adapt to your theme - white in light mode and a dark color in dark mode. If you need to customize the ring color, to match a different background, you can do so by adding a custom class to the `flux:avatar.group` component. ```blade 3+ 3+ ``` ## As button Use the `as` prop to make the avatar a button. ```blade ``` ## As link Use the `href` prop to make the avatar a link. ```blade ``` ## Examples ### Testimonial ```blade

IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥
Taylor Otwell Creator of Laravel
``` ### Grouped feature ```blade
The Laravel Podcast New A podcast about Laravel, development best practices, and the PHP ecosystem—hosted by Jeffrey Way, Matt Stauffer, and Taylor Otwell, later joined by Adam Wathan.
``` ### Members table Include avatars in table rows to make user data more identifiable. ```blade
Team members Invite
Caleb Porzio You caleb@laravel-livewire.com
Admin Member Guest
Hugo Sainte-Marie hugo@example.com
Admin Member Guest
Josh Hanley josh@example.com
Admin Member Guest
``` ### Assignees list Include avatars in table rows to make user data more identifiable. ```blade
Assignees
  • Caleb Porzio
  • Hugo Sainte-Marie
  • Josh Hanley
  • Jason Beggs
``` ### Select options Enhance select options with avatars to make them more visually recognizable. ```blade
Caleb Porzio
Hugo Sainte-Marie
Josh Hanley
Jason Beggs
``` ### User popover Display a user's profile information in a popover. ```blade
Follow back
Caleb Porzio @calebporzio Follows you I'm a full stack developer with a passion for building web applications. Currently working on a new project called Flux.
1.2k Followers
1.2k Following
``` ## Related - [Profile](https://fluxui.dev/components/profile) - Display a user's profile with avatar and optional name - [Tooltip](https://fluxui.dev/components/tooltip) - Display informative tooltips when hovering over an element ## Reference ### flux:avatar **Prop:** - `name` - User's name to display as initials. If provided without `initials`, this will be used to generate initials automatically. - `src` - URL to the image to display as avatar. - `initials` - Custom initials to display when no `src` is provided. Will override `name` if provided. - `alt` - Alternative text for the avatar image. (Default: `name` if provided) - `size` - Size of the avatar. Options: `xs` (24px), `sm` (32px), (default: 40px), `lg` (48px). - `color` - Background color when displaying initials or icons. Options: `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `auto`. Default: none (uses system colors). - `color:seed` - Value used when `color="auto"` to deterministically generate consistent colors. Useful for using user IDs to generate consistent colors. - `circle` - If present or `true`, makes the avatar fully circular instead of rounded corners. - `icon` - Name of the icon to display instead of an image or initials. - `icon:variant` - Icon variant to use. Options: `outline`, `solid`. Default: `solid`. - `tooltip` - Text to display in a tooltip when hovering over the avatar. If set to `true`, uses the `name` prop as tooltip content. - `tooltip:position` - Position of the tooltip. Options: `top`, `right`, `bottom`, `left`. Default: `top`. - `badge` - Content to display as a badge. Can be a string, boolean, or a slot. - `badge:color` - Color of the badge. Options: same color options as the `color` prop. - `badge:circle` - If present or `true`, makes the badge fully circular instead of slightly rounded corners. - `badge:position` - Position of the badge. Options: `top left`, `top right`, `bottom left`, `bottom right`. Default: `bottom right`. - `badge:variant` - Variant of the badge. Options: `solid`, `outline`. Default: `solid`. - `as` - Element to render the avatar as. Options: `button`, `div` (default). - `href` - URL to link to, making the avatar a link element. **Slot:** - `default` - Custom content to display inside the avatar. Will override `initials` if provided. - `badge` - Custom content to display in the badge (for more complex badge content). ### flux:avatar.group **Prop:** - `class` - CSS classes to apply to the group, including customizing ring colors using `*:ring-{color}` format. **Slot:** - `default` - Place multiple `flux:avatar` components here to display them as a group.