Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
Getting started
ContributingSystem argumentsLintingMigrationComponent status
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbsButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderIconButtonImageImageCropLabelLayoutLinkLocalTimeMarkdownMenuOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTabPanelsTextTimeAgoTimelineItemTruncateUnderlineNavUnderlinePanels
Architecture decisions
Developing and publishing client-side behaviours251. Use Catalyst for client-side behaviours
GitHub
On this page

Link

Beta
View sourceView storybook
On this page
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 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 %>
Edit this page on GitHub