Badge

<%= render(Zui::Badge.new) { "Doc" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", contrast: :high) { "Doc" } %>
<%= zui("badge", variant: :soft) { "Doc" } %>
<%= zui("badge", variant: :soft, contrast: :high) { "Doc" } %>
<%= zui("badge", variant: :solid) { "Doc" } %>
<%= zui("badge", variant: :solid, contrast: :high) { "Doc" } %>

<%= render(Zui::Badge.new(color: :gray)) { "Doc" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", color: :gray, contrast: :high) { "Doc" } %>
<%= zui("badge", color: :gray, variant: :soft) { "Doc" } %>
<%= zui("badge", color: :gray, variant: :soft, contrast: :high) { "Doc" } %>
<%= zui("badge", color: :gray, variant: :solid) { "Doc" } %>
<%= zui("badge", color: :gray, variant: :solid, contrast: :high) { "Doc" } %>

<%= render(Zui::Badge.new(rounded: :none)) { "Doc" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", rounded: :s) { "Doc" } %>
<%= zui("badge", rounded: :m) { "Doc" } %>
<%= zui("badge", rounded: :l) { "Doc" } %>
<%= zui("badge", rounded: :full) { "Doc" } %>


<%= zui("badge", rounded: :none, variant: :solid) { "Doc" } %>
<%= zui("badge", rounded: :s, variant: :solid) { "Doc" } %>
<%= zui("badge", rounded: :m, variant: :solid) { "Doc" } %>
<%= zui("badge", rounded: :l, variant: :solid) { "Doc" } %>
<%= zui("badge", rounded: :full, variant: :solid) { "Doc" } %>

<%= zui("badge", rounded: :none, variant: :solid, color: :gray, contrast: :high) { "Doc" } %>
<%= zui("badge", rounded: :s, variant: :solid, color: :gray, contrast: :high) { "Doc" } %>
<%= zui("badge", rounded: :m, variant: :solid, color: :gray, contrast: :high) { "Doc" } %>
<%= zui("badge", rounded: :l, variant: :solid, color: :gray, contrast: :high) { "Doc" } %>
<%= zui("badge", rounded: :full, variant: :solid, color: :gray, contrast: :high) { "Doc" } %>

<%= render(Zui::Badge.new(color: :red)) { "Error" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", color: :red, contrast: :high) { "Error" } %>
<%= zui("badge", color: :red, variant: :soft) { "Error" } %>
<%= zui("badge", color: :red, variant: :soft, contrast: :high) { "Error" } %>
<%= zui("badge", color: :red, variant: :solid) { "Error" } %>
<%= zui("badge", color: :red, variant: :solid, contrast: :high) { "Error" } %>

<%= render(Zui::Badge.new(color: :green)) { "Pass" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", color: :green, contrast: :high) { "Pass" } %>
<%= zui("badge", color: :green, variant: :soft) { "Pass" } %>
<%= zui("badge", color: :green, variant: :soft, contrast: :high) { "Pass" } %>
<%= zui("badge", color: :green, variant: :solid) { "Pass" } %>
<%= zui("badge", color: :green, variant: :solid, contrast: :high) { "Pass" } %>


<%= render(Zui::Badge.new(color: :yellow)) { "Warn" } %>
<%# Using zui helper method for brevity %>
<%= zui("badge", color: :yellow, contrast: :high) { "Warn" } %>
<%= zui("badge", color: :yellow, variant: :soft) { "Warn" } %>
<%= zui("badge", color: :yellow, variant: :soft, contrast: :high) { "Warn" } %>
<%= zui("badge", color: :yellow, variant: :solid) { "Warn" } %>
<%= zui("badge", color: :yellow, variant: :solid, contrast: :high) { "Warn" } %>