Badge

<%= render "ui/badge" do %>Badge<% end %>

<%= render UI::Badge.new { "Badge" } %>

<%= render(UI::BadgeComponent.new) { "Badge" } %>

<%= render "ui/badge", variant: :secondary do %>Secondary<% end %>

<%= render UI::Badge.new(variant: :secondary) { "Secondary" } %>

<%= render(UI::BadgeComponent.new(variant: :secondary)) { "Secondary" } %>

<%= render "ui/badge", variant: :destructive do %>Destructive<% end %>

<%= render UI::Badge.new(variant: :destructive) { "Destructive" } %>

<%= render(UI::BadgeComponent.new(variant: :destructive)) { "Destructive" } %>

<%= render "ui/badge", variant: :outline do %>Outline<% end %>

<%= render UI::Badge.new(variant: :outline) { "Outline" } %>

<%= render(UI::BadgeComponent.new(variant: :outline)) { "Outline" } %>

<%= render "ui/badge", variant: :secondary, classes: "bg-blue-500 text-white dark:bg-blue-600" do %>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
  </svg>
  Verified
<% end %>

<%= render UI::Badge.new(variant: :secondary, classes: "bg-blue-500 text-white dark:bg-blue-600") do %>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
  </svg>
  Verified
<% end %>

<%= render(UI::BadgeComponent.new(variant: :secondary, classes: "bg-blue-500 text-white dark:bg-blue-600")) do %>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
  </svg>
  Verified
<% end %>

<div class="relative inline-block">
  <%= render "ui/avatar" do %>
    <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "@fernandes" %>
    <%= render "ui/avatar/fallback" do %>F<% end %>
  <% end %>
  <%= render "ui/badge", classes: "absolute -top-1 -right-1 h-5 min-w-5 p-0 text-[10px]" do %>3<% end %>
</div>

<div class="relative inline-block">
  <%= render UI::Avatar.new do %>
    <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
    <%= render UI::AvatarFallback.new { "F" } %>
  <% end %>
  <%= render UI::Badge.new(classes: "absolute -top-1 -right-1 h-5 min-w-5 p-0 text-[10px]") { "3" } %>
</div>

<div class="relative inline-block">
  <%= render UI::AvatarComponent.new do %>
    <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
    <%= render(UI::AvatarFallbackComponent.new) { "F" } %>
  <% end %>
  <%= render(UI::BadgeComponent.new(classes: "absolute -top-1 -right-1 h-5 min-w-5 p-0 text-[10px]")) { "3" } %>
</div>