Avatar
Avatars represent users or entities with images or initials.
Initials Avatar
Display user initials when no image is available.
JD
AB
XY
<%= render Rvk::AvatarComponent.new(initials: "JD") %>Image Avatar
Display a user's profile image.
<%= render Rvk::AvatarComponent.new(src: "https://example.com/avatar.jpg", alt: "User") %>Sizes
Avatars come in 5 sizes: xs, sm, md (default), lg, and xl.
XS
SM
MD
LG
XL
<%= render Rvk::AvatarComponent.new(initials: "SM", size: :sm) %>
<%= render Rvk::AvatarComponent.new(initials: "LG", size: :lg) %>Avatar Group
Stack avatars with negative margin for groups.
+3
<div class="flex -space-x-2">
<%= render Rvk::AvatarComponent.new(src: "...", size: :sm, class: "border-2 border-white") %>
<%= render Rvk::AvatarComponent.new(initials: "+3", size: :sm, class: "border-2 border-white") %>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| initials | String | nil | Text to display (usually 1-2 characters) |
| src | String | nil | Image URL for the avatar |
| alt | String | "" | Alt text for the image |
| size | Symbol | :md | Avatar size: :xs, :sm, :md, :lg, :xl |