Skip to content

State

Component for rendering the status of an item.

Examples

Default

<%= render(Primer::StateComponent.new(title: "title")) { "State" } %>

Colors

<%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
<%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
<%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
<%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>

Sizes

<%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
<%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>

Arguments

NameTypeDefaultDescription
titleStringN/Atitle HTML attribute.
colorSymbol:defaultBackground color. One of :default, :green, :red, or :purple.
tagSymbol:spanHTML tag for element. One of :span, :div, or :a.
sizeSymbol:defaultOne of :default and :small.
system_argumentsHashN/ASystem arguments