Skip to content

Use Label to add contextual metadata to a design.

Accessibility

Use aria-label if the Label or the context around it don't explain the label.

Arguments

NameTypeDefaultDescription
tagSymbol:spanOne of :a, :div, :span, or :summary.
schemeSymbol:defaultOne of :accent, :attention, :danger, :default, :done, :info, :orange, :primary, :purple, :secondary, :severe, :sponsors, :success, or :warning.
variantSymbolnilOne of nil, :inline, or :large.
system_argumentsHashN/ASystem arguments

Examples

Schemes

DefaultPrimarySecondaryAccentSuccessAttentionDangerSevereDoneSponsors
<%= render(Primer::LabelComponent.new) { "Default" } %>
<%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
<%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
<%= render(Primer::LabelComponent.new(scheme: :accent)) { "Accent" } %>
<%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
<%= render(Primer::LabelComponent.new(scheme: :attention)) { "Attention" } %>
<%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
<%= render(Primer::LabelComponent.new(scheme: :severe)) { "Severe" } %>
<%= render(Primer::LabelComponent.new(scheme: :done)) { "Done" } %>
<%= render(Primer::LabelComponent.new(scheme: :sponsors)) { "Sponsors" } %>

Variants

DefaultLarge
<%= render(Primer::LabelComponent.new) { "Default" } %>
<%= render(Primer::LabelComponent.new(variant: :large)) { "Large" } %>