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.
schemeSymbolnilOne of :danger, :info, :orange, :primary, :purple, :secondary, :success, or :warning.
variantSymbolnilOne of nil, :inline, or :large.
system_argumentsHashN/ASystem arguments

Examples

Schemes

DefaultPrimarySecondaryInfoSuccessWarningDanger
<%= render(Primer::LabelComponent.new) { "Default" } %>
<%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
<%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
<%= render(Primer::LabelComponent.new(scheme: :info)) { "Info" } %>
<%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
<%= render(Primer::LabelComponent.new(scheme: :warning)) { "Warning" } %>
<%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>

Variants

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