Badge

React Component

Variants

Default Badge

Demonstrates the use of the default badge with various color options.

Neutral Info Success Warning Danger Accent

Dot

Demostrates a badge with an indicator dot.

Neutral Info Success Warning Danger Accent

Interactive Badge

Demonstrates an interactive badge with dropdown functionality.

Large Badge

Demonstrates larger badge sizes for emphasis.

Neutral Success

Sage Component

SageBadge

<h2>Variants</h2>

<h3>Default Badge</h3>

<p>Demonstrates the use of the default badge with various color options.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
  <%= sage_component SageBadge, { color: "draft", value: "Neutral" } %>
  <%= sage_component SageBadge, { color: "info", value: "Info" } %>
  <%= sage_component SageBadge, { color: "published", value: "Success" } %>
  <%= sage_component SageBadge, { color: "warning", value: "Warning" } %>
  <%= sage_component SageBadge, { color: "danger", value: "Danger" } %>
  <%= sage_component SageBadge, { color: "locked", value: "Accent" } %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Dot</h3>
<p>Demostrates a badge with an indicator dot.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
  <%= sage_component SageBadge, { color: "draft", value: "Neutral" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
  <%= sage_component SageBadge, { color: "info", value: "Info" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
  <%= sage_component SageBadge, { color: "published", value: "Success" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
  <%= sage_component SageBadge, { color: "warning", value: "Warning" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
  <%= sage_component SageBadge, { color: "danger", value: "Danger" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
  <%= sage_component SageBadge, { color: "locked", value: "Accent" } do %>
    <% content_for :sage_badge_dot do %>
      <%= sage_component SageDot, { color: "primary" } %>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Interactive Badge</h3>
<p>Demonstrates an interactive badge with dropdown functionality.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
  <%= sage_component SageBadge, { color: "draft", value: "Neutral", interactive_type: :dropdown } %>
  <%= sage_component SageBadge, { color: "info", value: "Info", interactive_type: :dropdown } %>
  <%= sage_component SageBadge, { color: "published", value: "Success", interactive_type: :dropdown } %>
  <%= sage_component SageBadge, { color: "warning", value: "Warning", interactive_type: :dropdown } %>
  <%= sage_component SageBadge, { color: "danger", value: "Danger", interactive_type: :dropdown } %>
  <%= sage_component SageBadge, { color: "locked", value: "Accent", interactive_type: :dropdown } %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Large Badge</h3>
<p>Demonstrates larger badge sizes for emphasis.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
  <%= sage_component SageBadge, { color: "draft", value: "Neutral", large: true } %>
  <%= sage_component SageBadge, { color: "published", value: "Success", 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 %>

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