Badge

React Component

Default Badge

Draft Published Info Warning Danger Locked

Indicator Badge

Draft Published Info Warning Danger Locked

Interactive Badge

Large Badge

Draft Published

Sage Component

SageBadge

<%
configs = [
  {
    color: "draft",
    icon: "draft",
  },
  {
    color: "published",
    icon: "check",
  },
  {
    color: "info",
    icon: "draft",
  },
  {
    color: "warning",
    icon: "warning",
  },
  {
    color: "danger",
    icon: "danger",
  },
  {
    color: "locked",
    icon: "lock",
  }
]
%>
<%= sage_component SagePanelBlock, {} do %>
  <h3 class="t-sage-heading-6">Default Badge</h3>
  <%= sage_component SageLabelGroup, {} do %>
    <% configs.each do | config | %>
      <%= sage_component SageBadge, {
        color: config[:color],
        value: config[:color].capitalize,
      }%>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
  <h3 class="t-sage-heading-6">Indicator Badge</h3>
  <%= sage_component SageLabelGroup, {} do %>
    <% configs.each do | config | %>
      <%= sage_component SageBadge, {
        color: config[:color],
        value: config[:color].capitalize,
      } do %>
        <% content_for :sage_badge_dot do %>
          <%= sage_component SageDot, { color: "primary" } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
  <h3 class="t-sage-heading-6">Interactive Badge</h3>
  <%= sage_component SageLabelGroup, {} do %>
    <% configs.each do | config | %>
      <%= sage_component SageBadge, {
        color: config[:color],
        value: config[:color].capitalize,
        interactive_type: :dropdown
      } do %>
        <% content_for :sage_badge_dot do %>
          <%= sage_component SageDot, { color: "primary" } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
  <h3 class="t-sage-heading-6">Large Badge</h3>
  <%= sage_component SageLabelGroup, {} do %>
    <%= sage_component SageBadge, {
      color: "draft",
      value: "Draft",
      large: true,
    } %>
    <%= sage_component SageBadge, {
      color: "published",
      value: "Published",
      large: true,
    } do %>
      <% content_for :sage_badge_dot do %>
        <%= sage_component SageDot, {} %>
      <% end %>
    <% end %>
    <%= sage_component SageBadge, {
      color: "warning",
      value: "Warning",
      large: true,
      interactive_type: :dropdown
    } do %>
      <% content_for :sage_badge_dot do %>
        <%= sage_component SageDot, {} %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Property	Description	Type	Default
`color`	Sets the color for the badge.	`"danger"`, `"draft"`, `"info"`, `"locked"`, `"published"`, `"success"`, or `"warning"`	Required
`container_attributes`	Additional attributes to provide bindings or actions to the badge container.	Hash	`nil`
`interactive_type`	Enable to set the badge's element as a `<button>`.	Boolean	`false`
`large`	Enables rendering of the badge in the "large" format.	Boolean	`false`
`value` required	The text to use as the badge's content	String	Required
Badge Group
`align`	Adjusts the alignment of the badges within.	[`"center"` \| `"end"` \| `"space-between"`]	`nil`
`gap`	Adjusts the size of the gap between badges. `xs` is the default gap size.	[`:sm` \| `:md` \| `:lg`]	`nil`

Don't