Badge Shared Partial

1. Copy shared partial files

Download all 1 shared partial files as a ZIP file.

After downloading, unzip and copy the badge/ folder to your app/views/shared/components/ directory.

Copy these files to your app/views/shared/components/badge/ directory:

Include :dark classes

<%#
  Badge Component
  Displays status labels, tags, and categories with semantic colors.

  Required locals:
    - text: String - The badge text content

  Optional locals:
    - variant: String (default: "neutral") - Color variant: "neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"
    - size: String (default: "md") - Size: "sm" (small), "md" (regular)
    - pill: Boolean (default: false) - Whether to use pill shape (rounded-full) instead of rounded corners
    - dot: Boolean (default: false) - Whether to show a colored dot indicator
    - removable: Boolean (default: false) - Whether to show a remove/close button
    - classes: String (default: nil) - Additional CSS classes for the wrapper
%>

<% text ||= "" %>
<% variant ||= "neutral" %>
<% size ||= "md" %>
<% pill ||= false %>
<% dot ||= false %>
<% removable ||= false %>
<% classes ||= nil %>

<%
  # Helper to check if badge has addons (dot or remove button)
  has_addon = dot || removable

  # Determine color classes based on variant
  colors = case variant.to_s
    when "red"
      {
        bg: "bg-red-50 dark:bg-red-400/10",
        text: "text-red-700 dark:text-red-400",
        outline: "outline outline-red-600/20 dark:outline-red-400/25",
        dot: "bg-red-500 dark:bg-red-400",
        button_bg: "bg-red-100 dark:bg-red-400/10",
        button_text: "text-red-600 dark:text-red-400",
        button_hover: "hover:bg-red-200 hover:dark:bg-red-400/20",
        button_outline: "outline outline-red-500/20 dark:outline-red-400/25"
      }
    when "orange"
      {
        bg: "bg-orange-50 dark:bg-orange-400/10",
        text: "text-orange-700 dark:text-orange-400",
        outline: "outline outline-orange-600/20 dark:outline-orange-400/25",
        dot: "bg-orange-500 dark:bg-orange-400",
        button_bg: "bg-orange-100 dark:bg-orange-400/10",
        button_text: "text-orange-600 dark:text-orange-400",
        button_hover: "hover:bg-orange-200 hover:dark:bg-orange-400/20",
        button_outline: "outline outline-orange-500/20 dark:outline-orange-400/25"
      }
    when "yellow"
      {
        bg: "bg-yellow-50 dark:bg-yellow-400/10",
        text: "text-yellow-700 dark:text-yellow-500",
        outline: "outline outline-yellow-700/20 dark:outline-yellow-400/25",
        dot: "bg-yellow-500 dark:bg-yellow-400",
        button_bg: "bg-yellow-100 dark:bg-yellow-400/10",
        button_text: "text-yellow-600 dark:text-yellow-400",
        button_hover: "hover:bg-yellow-200 hover:dark:bg-yellow-400/20",
        button_outline: "outline outline-yellow-500/20 dark:outline-yellow-400/25"
      }
    when "green"
      {
        bg: "bg-green-50 dark:bg-green-400/10",
        text: "text-green-700 dark:text-green-400",
        outline: "outline outline-green-600/20 dark:outline-green-400/25",
        dot: "bg-green-500 dark:bg-green-400",
        button_bg: "bg-green-100 dark:bg-green-400/10",
        button_text: "text-green-600 dark:text-green-400",
        button_hover: "hover:bg-green-200 hover:dark:bg-green-400/20",
        button_outline: "outline outline-green-500/20 dark:outline-green-400/25"
      }
    when "blue"
      {
        bg: "bg-blue-50 dark:bg-blue-400/10",
        text: "text-blue-700 dark:text-blue-400",
        outline: "outline outline-blue-600/20 dark:outline-blue-400/25",
        dot: "bg-blue-500 dark:bg-blue-400",
        button_bg: "bg-blue-100 dark:bg-blue-400/10",
        button_text: "text-blue-600 dark:text-blue-400",
        button_hover: "hover:bg-blue-200 hover:dark:bg-blue-400/20",
        button_outline: "outline outline-blue-500/20 dark:outline-blue-400/25"
      }
    when "purple"
      {
        bg: "bg-purple-50 dark:bg-purple-400/10",
        text: "text-purple-700 dark:text-purple-400",
        outline: "outline outline-purple-700/20 dark:outline-purple-400/25",
        dot: "bg-purple-500 dark:bg-purple-400",
        button_bg: "bg-purple-100 dark:bg-purple-400/10",
        button_text: "text-purple-600 dark:text-purple-400",
        button_hover: "hover:bg-purple-200 hover:dark:bg-purple-400/20",
        button_outline: "outline outline-purple-500/20 dark:outline-purple-400/25"
      }
    when "pink"
      {
        bg: "bg-pink-50 dark:bg-pink-400/10",
        text: "text-pink-700 dark:text-pink-400",
        outline: "outline outline-pink-700/20 dark:outline-pink-400/25",
        dot: "bg-pink-500 dark:bg-pink-400",
        button_bg: "bg-pink-100 dark:bg-pink-400/10",
        button_text: "text-pink-600 dark:text-pink-400",
        button_hover: "hover:bg-pink-200 hover:dark:bg-pink-400/20",
        button_outline: "outline outline-pink-500/20 dark:outline-pink-400/25"
      }
    else # :neutral
      {
        bg: "bg-neutral-50 dark:bg-neutral-400/10",
        text: "text-neutral-700 dark:text-neutral-400",
        outline: "outline outline-neutral-500/20 dark:outline-neutral-400/25",
        dot: "bg-neutral-500 dark:bg-neutral-400",
        button_bg: "bg-neutral-100 dark:bg-neutral-400/10",
        button_text: "text-neutral-600 dark:text-neutral-400",
        button_hover: "hover:bg-neutral-200 hover:dark:bg-neutral-400/20",
        button_outline: "outline outline-neutral-500/20 dark:outline-neutral-400/25"
      }
    end

  # Size classes
  size_classes = case size.to_s
    when "sm"
      has_addon ? "gap-1 pl-1.5 pr-1 py-0.5 text-[11px]" : "gap-0.5 px-1.5 py-0.5 text-[11px]"
    else # "md"
      has_addon ? "gap-1 pl-2 pr-1.5 py-1 text-xs" : "gap-1 px-2 py-1 text-xs"
    end

  # Shape classes
  shape_classes = pill ? "rounded-full" : "rounded-md"

  # Button size classes
  button_size_classes = size.to_s == "sm" ? "p-0.5 text-[10px]" : "p-0.5 text-xs"

  # Dot size classes
  dot_size_classes = size.to_s == "sm" ? "p-[0.175rem]" : "p-1"

  # Icon size classes
  icon_size_classes = size.to_s == "sm" ? "size-2" : "size-2.5"

  # Button shape classes
  button_shape_classes = pill ? "rounded-full" : "rounded"

  # Build wrapper classes
  base_classes = "inline-flex items-center font-medium"
  wrapper_classes = [base_classes, size_classes, shape_classes, colors[:bg], colors[:text], colors[:outline], classes].compact.reject(&:empty?).join(" ")

  # Build button classes
  button_classes = [button_shape_classes, colors[:button_bg], colors[:button_text], colors[:button_hover], colors[:button_outline], button_size_classes, "focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400"].join(" ")

  # Build dot classes
  dot_classes = ["rounded-full", colors[:dot], dot_size_classes].join(" ")
%>

<% if text.present? %>
<span class="<%= wrapper_classes %>">
  <%= text %>
  <% if dot %>
    <div class="<%= dot_classes %>"></div>
  <% end %>
  <% if removable %>
    <button type="button" class="<%= button_classes %>">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="<%= icon_size_classes %>">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  <% end %>
</span>
<% end %>

2. Usage example

Include :dark classes

<!-- Basic badge (neutral, medium size) -->
<%= render "shared/components/badge/badge",
  text: "Badge" %>

<!-- Color variants -->
<%= render "shared/components/badge/badge",
  text: "Neutral",
  variant: "neutral" %>

<%= render "shared/components/badge/badge",
  text: "Success",
  variant: "green" %>

<%= render "shared/components/badge/badge",
  text: "Error",
  variant: "red" %>

<%= render "shared/components/badge/badge",
  text: "Warning",
  variant: "yellow" %>

<%= render "shared/components/badge/badge",
  text: "Info",
  variant: "blue" %>

<%= render "shared/components/badge/badge",
  text: "Purple",
  variant: "purple" %>

<%= render "shared/components/badge/badge",
  text: "Orange",
  variant: "orange" %>

<%= render "shared/components/badge/badge",
  text: "Pink",
  variant: "pink" %>

<!-- Small size -->
<%= render "shared/components/badge/badge",
  text: "Small badge",
  variant: "blue",
  size: "sm" %>

<!-- Pill shape (fully rounded) -->
<%= render "shared/components/badge/badge",
  text: "Pill badge",
  variant: "green",
  pill: true %>

<!-- Small pill -->
<%= render "shared/components/badge/badge",
  text: "Small pill",
  variant: "purple",
  size: "sm",
  pill: true %>

<!-- With dot indicator -->
<%= render "shared/components/badge/badge",
  text: "Active",
  variant: "green",
  dot: true %>

<!-- Pill with dot -->
<%= render "shared/components/badge/badge",
  text: "Online",
  variant: "green",
  pill: true,
  dot: true %>

<!-- Small with dot -->
<%= render "shared/components/badge/badge",
  text: "Live",
  variant: "red",
  size: "sm",
  dot: true %>

<!-- Removable badge -->
<%= render "shared/components/badge/badge",
  text: "Removable",
  variant: "blue",
  removable: true %>

<!-- Removable pill -->
<%= render "shared/components/badge/badge",
  text: "Tag",
  variant: "purple",
  pill: true,
  removable: true %>

<!-- Small removable -->
<%= render "shared/components/badge/badge",
  text: "Filter",
  variant: "neutral",
  size: "sm",
  removable: true %>

<!-- With custom classes -->
<%= render "shared/components/badge/badge",
  text: "Custom",
  variant: "blue",
  classes: "shadow-sm" %>

<!-- Status badge example -->
<%= render "shared/components/badge/badge",
  text: "Published",
  variant: "green",
  dot: true %>

<%= render "shared/components/badge/badge",
  text: "Draft",
  variant: "yellow",
  dot: true %>

<%= render "shared/components/badge/badge",
  text: "Archived",
  variant: "neutral",
  dot: true %>

Rendered usage example

Badge ViewComponent

1. Ensure the gem is installed

gem "view_component", "~> 4.2"

2. Copy component files

Download all 2 component files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the badge/ folder to your app/components/ directory.

Copy these files to your app/components/badge/ directory:

Include :dark classes

<span class="<%= wrapper_classes %>">
  <%= @text %>
  <% if @dot %>
    <div class="<%= dot_classes %>"></div>
  <% end %>
  <% if @removable %>
    <button type="button" class="<%= remove_button_classes %>">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="<%= icon_size %>">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  <% end %>
</span>

Include :dark classes

# frozen_string_literal: true

module Badge
  class Component < ViewComponent::Base
    VARIANTS = %i[neutral red orange yellow green blue purple pink].freeze
    SIZES = %i[sm md].freeze

    # @param text [String] The badge text content
    # @param variant [Symbol] Color variant: :neutral, :red, :orange, :yellow, :green, :blue, :purple, :pink
    # @param size [Symbol] Size: :sm (small), :md (regular/default)
    # @param pill [Boolean] Whether to use pill shape (rounded-full) instead of rounded corners
    # @param dot [Boolean] Whether to show a colored dot indicator
    # @param removable [Boolean] Whether to show a remove/close button
    # @param classes [String] Additional CSS classes for the wrapper
    def initialize(text:, variant: :neutral, size: :md, pill: false, dot: false, removable: false, classes: nil)
      super()
      @text = text
      @variant = VARIANTS.include?(variant) ? variant : :neutral
      @size = SIZES.include?(size) ? size : :md
      @pill = pill
      @dot = dot
      @removable = removable
      @classes = classes
    end

    def wrapper_classes
      [
        base_classes,
        size_classes,
        shape_classes,
        colors[:bg],
        colors[:text],
        colors[:outline],
        @classes
      ].compact.reject(&:empty?).join(" ")
    end

    def colors
      @colors ||= case @variant
                  when :red
                    {
                      bg: "bg-red-50 dark:bg-red-400/10",
                      text: "text-red-700 dark:text-red-400",
                      outline: "outline outline-red-600/20 dark:outline-red-400/25",
                      dot: "bg-red-500 dark:bg-red-400",
                      button_bg: "bg-red-100 dark:bg-red-400/10",
                      button_text: "text-red-600 dark:text-red-400",
                      button_hover: "hover:bg-red-200 hover:dark:bg-red-400/20",
                      button_outline: "outline outline-red-500/20 dark:outline-red-400/25"
                    }
                  when :orange
                    {
                      bg: "bg-orange-50 dark:bg-orange-400/10",
                      text: "text-orange-700 dark:text-orange-400",
                      outline: "outline outline-orange-600/20 dark:outline-orange-400/25",
                      dot: "bg-orange-500 dark:bg-orange-400",
                      button_bg: "bg-orange-100 dark:bg-orange-400/10",
                      button_text: "text-orange-600 dark:text-orange-400",
                      button_hover: "hover:bg-orange-200 hover:dark:bg-orange-400/20",
                      button_outline: "outline outline-orange-500/20 dark:outline-orange-400/25"
                    }
                  when :yellow
                    {
                      bg: "bg-yellow-50 dark:bg-yellow-400/10",
                      text: "text-yellow-700 dark:text-yellow-500",
                      outline: "outline outline-yellow-700/20 dark:outline-yellow-400/25",
                      dot: "bg-yellow-500 dark:bg-yellow-400",
                      button_bg: "bg-yellow-100 dark:bg-yellow-400/10",
                      button_text: "text-yellow-600 dark:text-yellow-400",
                      button_hover: "hover:bg-yellow-200 hover:dark:bg-yellow-400/20",
                      button_outline: "outline outline-yellow-500/20 dark:outline-yellow-400/25"
                    }
                  when :green
                    {
                      bg: "bg-green-50 dark:bg-green-400/10",
                      text: "text-green-700 dark:text-green-400",
                      outline: "outline outline-green-600/20 dark:outline-green-400/25",
                      dot: "bg-green-500 dark:bg-green-400",
                      button_bg: "bg-green-100 dark:bg-green-400/10",
                      button_text: "text-green-600 dark:text-green-400",
                      button_hover: "hover:bg-green-200 hover:dark:bg-green-400/20",
                      button_outline: "outline outline-green-500/20 dark:outline-green-400/25"
                    }
                  when :blue
                    {
                      bg: "bg-blue-50 dark:bg-blue-400/10",
                      text: "text-blue-700 dark:text-blue-400",
                      outline: "outline outline-blue-600/20 dark:outline-blue-400/25",
                      dot: "bg-blue-500 dark:bg-blue-400",
                      button_bg: "bg-blue-100 dark:bg-blue-400/10",
                      button_text: "text-blue-600 dark:text-blue-400",
                      button_hover: "hover:bg-blue-200 hover:dark:bg-blue-400/20",
                      button_outline: "outline outline-blue-500/20 dark:outline-blue-400/25"
                    }
                  when :purple
                    {
                      bg: "bg-purple-50 dark:bg-purple-400/10",
                      text: "text-purple-700 dark:text-purple-400",
                      outline: "outline outline-purple-700/20 dark:outline-purple-400/25",
                      dot: "bg-purple-500 dark:bg-purple-400",
                      button_bg: "bg-purple-100 dark:bg-purple-400/10",
                      button_text: "text-purple-600 dark:text-purple-400",
                      button_hover: "hover:bg-purple-200 hover:dark:bg-purple-400/20",
                      button_outline: "outline outline-purple-500/20 dark:outline-purple-400/25"
                    }
                  when :pink
                    {
                      bg: "bg-pink-50 dark:bg-pink-400/10",
                      text: "text-pink-700 dark:text-pink-400",
                      outline: "outline outline-pink-700/20 dark:outline-pink-400/25",
                      dot: "bg-pink-500 dark:bg-pink-400",
                      button_bg: "bg-pink-100 dark:bg-pink-400/10",
                      button_text: "text-pink-600 dark:text-pink-400",
                      button_hover: "hover:bg-pink-200 hover:dark:bg-pink-400/20",
                      button_outline: "outline outline-pink-500/20 dark:outline-pink-400/25"
                    }
                  else # :neutral
                    {
                      bg: "bg-neutral-50 dark:bg-neutral-400/10",
                      text: "text-neutral-700 dark:text-neutral-400",
                      outline: "outline outline-neutral-500/20 dark:outline-neutral-400/25",
                      dot: "bg-neutral-500 dark:bg-neutral-400",
                      button_bg: "bg-neutral-100 dark:bg-neutral-400/10",
                      button_text: "text-neutral-600 dark:text-neutral-400",
                      button_hover: "hover:bg-neutral-200 hover:dark:bg-neutral-400/20",
                      button_outline: "outline outline-neutral-500/20 dark:outline-neutral-400/25"
                    }
                  end
    end

    def remove_button_classes
      button_shape = @pill ? "rounded-full" : "rounded"
      [
        button_shape,
        colors[:button_bg],
        colors[:button_text],
        colors[:button_hover],
        colors[:button_outline],
        button_size_classes,
        "focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400"
      ].join(" ")
    end

    def dot_classes
      [
        "rounded-full",
        colors[:dot],
        dot_size_classes
      ].join(" ")
    end

    private

    def base_classes
      "inline-flex items-center font-medium"
    end

    def size_classes
      case @size
      when :sm
        addon? ? "gap-1 pl-1.5 pr-1 py-0.5 text-[11px]" : "gap-0.5 px-1.5 py-0.5 text-[11px]"
      else # :md
        addon? ? "gap-1 pl-2 pr-1.5 py-1 text-xs" : "gap-1 px-2 py-1 text-xs"
      end
    end

    def shape_classes
      @pill ? "rounded-full" : "rounded-md"
    end

    def button_size_classes
      @size == :sm ? "p-0.5 text-[10px]" : "p-0.5 text-xs"
    end

    def dot_size_classes
      @size == :sm ? "p-[0.175rem]" : "p-1"
    end

    def icon_size_classes
      @size == :sm ? "size-2" : "size-2.5"
    end

    def addon?
      @dot || @removable
    end

    def render?
      @text.present?
    end

    attr_reader :text, :dot, :removable, :size

    def icon_size
      icon_size_classes
    end
  end
end

3. Usage example

Include :dark classes

<!-- Basic badge (neutral, medium size) -->
<%= render Badge::Component.new(
  text: "Badge"
) %>

<!-- Color variants -->
<%= render Badge::Component.new(
  text: "Neutral",
  variant: :neutral
) %>

<%= render Badge::Component.new(
  text: "Success",
  variant: :green
) %>

<%= render Badge::Component.new(
  text: "Error",
  variant: :red
) %>

<%= render Badge::Component.new(
  text: "Warning",
  variant: :yellow
) %>

<%= render Badge::Component.new(
  text: "Info",
  variant: :blue
) %>

<%= render Badge::Component.new(
  text: "Purple",
  variant: :purple
) %>

<%= render Badge::Component.new(
  text: "Orange",
  variant: :orange
) %>

<%= render Badge::Component.new(
  text: "Pink",
  variant: :pink
) %>

<!-- Small size -->
<%= render Badge::Component.new(
  text: "Small badge",
  variant: :blue,
  size: :sm
) %>

<!-- Pill shape (fully rounded) -->
<%= render Badge::Component.new(
  text: "Pill badge",
  variant: :green,
  pill: true
) %>

<!-- Small pill -->
<%= render Badge::Component.new(
  text: "Small pill",
  variant: :purple,
  size: :sm,
  pill: true
) %>

<!-- With dot indicator -->
<%= render Badge::Component.new(
  text: "Active",
  variant: :green,
  dot: true
) %>

<!-- Pill with dot -->
<%= render Badge::Component.new(
  text: "Online",
  variant: :green,
  pill: true,
  dot: true
) %>

<!-- Small with dot -->
<%= render Badge::Component.new(
  text: "Live",
  variant: :red,
  size: :sm,
  dot: true
) %>

<!-- Removable badge -->
<%= render Badge::Component.new(
  text: "Removable",
  variant: :blue,
  removable: true
) %>

<!-- Removable pill -->
<%= render Badge::Component.new(
  text: "Tag",
  variant: :purple,
  pill: true,
  removable: true
) %>

<!-- Small removable -->
<%= render Badge::Component.new(
  text: "Filter",
  variant: :neutral,
  size: :sm,
  removable: true
) %>

<!-- With custom classes -->
<%= render Badge::Component.new(
  text: "Custom",
  variant: :blue,
  classes: "shadow-sm"
) %>

<!-- Status badge example -->
<%= render Badge::Component.new(
  text: "Published",
  variant: :green,
  dot: true
) %>

<%= render Badge::Component.new(
  text: "Draft",
  variant: :yellow,
  dot: true
) %>

<%= render Badge::Component.new(
  text: "Archived",
  variant: :neutral,
  dot: true
) %>

Rendered usage example

Badge Rails Components

Badges are used to highlight items and draw attention to them. They can be used to indicate a new feature, a promotion, a warning, or as a list of tags for example.

Examples

Basic Badge

A basic badge with a label.

Badge Badge Badge Badge Badge Badge Badge Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-0.5 rounded-md bg-neutral-50 px-1.5 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-red-50 px-1.5 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-orange-50 px-1.5 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-yellow-50 px-1.5 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-green-50 px-1.5 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-purple-50 px-1.5 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-md bg-pink-50 px-1.5 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

Pill Badge

A pill badge with a label.

Badge Badge Badge Badge Badge Badge Badge Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-0.5 rounded-full bg-neutral-50 px-1.5 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-red-50 px-1.5 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-orange-50 px-1.5 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-yellow-50 px-1.5 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-green-50 px-1.5 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-purple-50 px-1.5 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-0.5 rounded-full bg-pink-50 px-1.5 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

Basic Badge with Remove button

A basic badge with a label and a remove button.

Badge Badge Badge Badge Badge Badge Badge Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded bg-neutral-100 p-0.5 text-xs font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded bg-red-100 p-0.5 text-xs font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded bg-orange-100 p-0.5 text-xs font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded bg-yellow-100 p-0.5 text-xs font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded bg-green-100 p-0.5 text-xs font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded bg-blue-100 p-0.5 text-xs font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded bg-purple-100 p-0.5 text-xs font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded bg-pink-100 p-0.5 text-xs font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded bg-neutral-100 p-0.5 text-[10px] font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded bg-red-100 p-0.5 text-[10px] font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded bg-orange-100 p-0.5 text-[10px] font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded bg-yellow-100 p-0.5 text-[10px] font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded bg-green-100 p-0.5 text-[10px] font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded bg-blue-100 p-0.5 text-[10px] font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded bg-purple-100 p-0.5 text-[10px] font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded bg-pink-100 p-0.5 text-[10px] font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

Pill Badge with Remove button

A pill badge with a label and a remove button.

Badge Badge Badge Badge Badge Badge Badge Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded-full bg-neutral-100 p-0.5 text-xs font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded-full bg-red-100 p-0.5 text-xs font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded-full bg-orange-100 p-0.5 text-xs font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded-full bg-yellow-100 p-0.5 text-xs font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded-full bg-green-100 p-0.5 text-xs font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded-full bg-blue-100 p-0.5 text-xs font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded-full bg-purple-100 p-0.5 text-xs font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded-full bg-pink-100 p-0.5 text-xs font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded-full bg-neutral-100 p-0.5 text-[10px] font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded-full bg-red-100 p-0.5 text-[10px] font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded-full bg-orange-100 p-0.5 text-[10px] font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded-full bg-yellow-100 p-0.5 text-[10px] font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded-full bg-green-100 p-0.5 text-[10px] font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded-full bg-blue-100 p-0.5 text-[10px] font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded-full bg-purple-100 p-0.5 text-[10px] font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded-full bg-pink-100 p-0.5 text-[10px] font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

Basic Badge with Dot

A basic badge with a label and a dot.

Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-1 dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-1 dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-1 dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-1 dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-1 dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-1 dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-1 dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-1 dark:bg-pink-400">
    </div>
  </span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-[0.175rem] dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-[0.175rem] dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-[0.175rem] dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-[0.175rem] dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-[0.175rem] dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-[0.175rem] dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-[0.175rem] dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-[0.175rem] dark:bg-pink-400">
    </div>
  </span>
</div>

Pill Badge with Dot

A pill badge with a label and a dot.

Badge

Include :dark classes

<!-- Regular Size -->
<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-1 dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-1 dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-1 dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-1 dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-1 dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-1 dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-1 dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-1 dark:bg-pink-400">
    </div>
  </span>
</div>

<!-- Small Size -->
<div class="flex flex-wrap gap-2 justify-center mt-4">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-[0.175rem] dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-[0.175rem] dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-[0.175rem] dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-[0.175rem] dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-[0.175rem] dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-[0.175rem] dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-[0.175rem] dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-1.5 pr-1 py-0.5 text-[11px] font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-[0.175rem] dark:bg-pink-400">
    </div>
  </span>
</div>

Autogrow

Banner