Skip to content
This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use Link for navigating from one page to another. Link styles anchor tags with default blue styling and hover text-decoration.

Arguments

NameTypeDefaultDescription
tagString:aOne of :a and :span.
hrefStringnilURL to be used for the Link. Required if tag is :a. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
schemeSymbol:defaultOne of :default, :primary, or :secondary.
mutedBooleanfalseUses light gray for Link color, and blue on hover.
underlineBooleantrueWhether or not to underline the link.
system_argumentsHashN/ASystem arguments

Slots

Tooltip

Tooltip that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort. Important: This tooltip defaults to type: :description. In a few scenarios, type: :label may be more appropriate. Consult the Tooltip documentation for more information.

NameTypeDefaultDescription
typeSymbol:descriptionOne of :description and :label.
system_argumentsHashN/ASame arguments as Tooltip.

Examples

Default

<%= render(Primer::LinkComponent.new(href: "#")) { "Link" } %>

Muted

<%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>

Schemes

<%= render(Primer::LinkComponent.new(href: "#", scheme: :primary)) { "Primary" } %>
<%= render(Primer::LinkComponent.new(href: "#", scheme: :secondary)) { "Secondary" } %>

Without underline

<%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
Span as a link
<%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>

With tooltip

Use tooltips sparingly and as a last resort. Consult the Tooltip documentation for more information.

<%= render(Primer::LinkComponent.new(href: "#", id: "link-with-tooltip")) do |c| %>
<% c.tooltip(text: "Tooltip text") %>
Link
<% end %>