Skip to content

Label

Table of contents
Table of contents

Use Label to add contextual metadata to a design.

Examples

Schemes

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

Variants

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

Arguments

NameTypeDefaultDescription
titleStringN/Atitle attribute for the component element.
schemeSymbolnilOne of :primary, :secondary, :info, :success, :warning, :danger, :orange, or :purple.
variantSymbolnilOne of :large, :inline, or nil.
system_argumentsHashN/ASystem arguments