Flowbite::Avatar

Renders an avatar representing a user.

The avatar shows an image when +src+ is given. Without an image it falls back to the given +initials+, and without initials it renders a placeholder person icon.

Image

<%= render(Flowbite::Avatar.new(alt: "Jese Leos", src: user.avatar_url)) %>

Initials with a rounded square shape

<%= render(Flowbite::Avatar.new(initials: "JL", shape: :rounded)) %>

Placeholder icon with a status dot

<%= render(Flowbite::Avatar.new) do |avatar| %>
  <% avatar.with_bottom_dot(label: "Online", style: :success) %>
<% end %>

Examples

Default Avatar

Use this example to create a circle and rounded avatar on an image element.

Bordered

Apply a border around the avatar component.

Placeholder Icon

When there is no image or initials, a placeholder person icon is shown.

Placeholder Initials

When there is no image, the initials of the user are shown instead.

Dot Indicator

Show a colored dot to indicate the status of the user using the top_dot or bottom_dot slots. Pass a label to describe the status for screen readers.

Sizes

Select a size for the avatar.

API reference

Inherits from Flowbite

In namespace

Slots

`bottom_dot`	Flowbite::Avatar::Dot	A status dot placed at the bottom of the avatar. Use +with_bottom_dot+ to add one.
`top_dot`	Flowbite::Avatar::Dot	A status dot placed at the top of the avatar. Use +with_top_dot+ to add one.

Constructor

def initialize(alt: nil, bordered: false, class: nil, initials: nil, shape: :circle, size: :default, src: nil, **options)

Parameters

`alt`	String	Alternative text for the image. Defaults to an empty string, marking the image as decorative.
`bordered`	Boolean	Whether to add a ring around the avatar.
`class`	String, Array<String>	Additional CSS classes for the avatar element.
`initials`	String	Initials to show when there is no image.
`options`	Hash	Additional HTML options for the avatar element.
`shape`	Symbol	The shape of the avatar (:circle, :rounded).
`size`	Symbol	The size of the avatar (:xs, :sm, :base, :default, :lg, :xl, :"2xl").
`src`	String	The URL of the avatar image. When blank, the avatar falls back to initials or a placeholder icon.