Skip to content

Label

Use label component to add contextual metadata to a design.
  • Beta
  • Not reviewed for accessibility

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.
sizeSymbol:mediumOne of :large or :medium.
inlineBooleanfalseWhether or not to render this label inline.
variantSymbol:noneOne of :inline, :large, or :none.
system_argumentsHashN/ASystem arguments

Examples

Schemes

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

Sizes

MediumLarge
<%= render(Primer::Beta::Label.new) { "Medium" } %>
<%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>

Inline

DefaultInline
<%= render(Primer::Beta::Label.new) { "Default" } %>
<%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>