Use Link for navigating from one page to another. Link styles anchor tags with default blue styling and hover text-decoration.
| Name | Type | Default | Description |
|---|---|---|---|
tag | String | :a | One of :a or :span. |
href | String | nil | URL 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. |
scheme | Symbol | :default | One of :default, :primary, or :secondary. |
muted | Boolean | false | Uses light gray for Link color, and blue on hover. |
underline | Boolean | true | Whether or not to underline the link. |
system_arguments | Hash | N/A | System arguments |
tooltipTooltip 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.
| Name | Type | Default | Description |
|---|---|---|---|
type | Symbol | :description | One of :description or :label. |
system_arguments | Hash | N/A | Same arguments as Tooltip. |
<%= render(Primer::Beta::Link.new(href: "#")) { "Link" } %>
<%= render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } %>
<%= render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %><%= render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>
<%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>
Use tooltips sparingly and as a last resort. Consult the Tooltip documentation for more information.
<%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %><% component.with_tooltip(text: "Tooltip text") %>Link<% end %>