Flowbite::Avatar::Dot

Renders a status dot indicator positioned on top of an avatar.

Usually added through the +top_dot+ or +bottom_dot+ slots of Flowbite::Avatar, which set the position and size. When rendered on its own, the dot must be placed inside a relatively positioned container together with the avatar.

Through an Avatar slot

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

Standalone

<div class="relative">
  <%= render(Flowbite::Avatar.new(src: user.avatar_url)) %>
  <%= render(Flowbite::Avatar::Dot.new(label: "Online", position: :bottom, style: :success)) %>
</div>

API reference

Inherits from Flowbite::Avatar

Constructor

def initialize(label: nil, position: :top, size: :default, style: :success)

Parameters

`label`	String	Text describing the status for screen readers, since the dot otherwise only conveys it through color.
`position`	Symbol	Where to place the dot (:bottom, :top).
`size`	Symbol	The size of the avatar the dot is placed on.
`style`	Symbol	The color of the dot (:danger, :success).