Skip to content

Link

Use link for navigating from one page to another.
  • Beta
  • Not reviewed for accessibility
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 or :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. The tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested under a positioning wrapper. Consult the Tooltip documentation for more information.

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

Examples

Default

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

Muted

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

Schemes

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

Without underline

<%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>

With tooltip

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

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