Components
Avatar
Avatars bring life to the interface, offering a small but vivid representation of individuals or businesses.
Shape
Circular avatars
The `avatar` component class serves as a wrapper for the image, while the <a href="https://tailwindcss.com/docs/width#setting-both-width-and-height" target="_blank" class="link link-primary">Size</a> and <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes can be utilized to adjust its dimensions and radius.
Rounded avatars
Apply the `rounded-md` utility class to achieve rounded avatars.
Masked avatars
The `mask` class modifier can be applied to define the shape of the avatar.
Placeholder
Placeholder icon
Use `avatar-placeholder` component class with `avatar` for placeholder styles. </br> Design circular avatar elements featuring placeholder icons.
Placeholder initials
Design circular avatar elements featuring placeholder initials.
Color variants
Solid color
Pre-configured solid color avatar designs.
Soft color
Pre-configured soft color avatar designs.
Outline color
Pre-configured outline color avatar designs.
Status
Top status indicators
Avatars featuring various status indicators at top.
Bottom status indicators
Avatars featuring various status indicators at bottom.
Avatar with logo indicator
Avatars featuring various status indicators at bottom.
Avatar group
Basic circular avatar group
The `avatar-group` class acts as a container for avatars, allowing you to manage the spacing between them with the `-space-x-4` class.
Pull up animation with tooltip
Utilize the `pull-up` class to enable hover functionality for the avatar.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
avatar | component | Container element |
avatar-group | component | Container for grouping multiple avatars |
avatar-placeholder | part | To show some letters as avatar placeholder |
pull-up | style | Add pull up animation when used with avatar group |
avatar-online-top | modifier | Shows a green dot at top as online indicator |
avatar-online-bottom | modifier | Shows a green dot at bottom as online indicator |
avatar-away-top | modifier | Shows a warning dot at top as away indicator |
avatar-away-bottom | modifier | Shows a warning dot at bottom as away indicator |
avatar-busy-top | modifier | Shows an error dot at top as busy indicator |
avatar-busy-bottom | modifier | Shows an error dot at bottom as busy indicator |
avatar-offline-top | modifier | Shows a neutral dot at top as offline indicator |
avatar-offline-bottom | modifier | Shows a neutral dot at bottom as offline indicator |