Skip to content
On this page
On this page

Use State for rendering the status of an item.

Arguments

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

Examples

Default

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

Schemes

DefaultOpenClosedMerged
<%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
<%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
<%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
<%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>

Sizes

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