LinkComponent

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

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

Arguments

Name	Type	Default	Description
`tag`	`String`	`:a`	One of `:a` and `:span`.
`href`	`String`	N/A	URL to be used for the link.
`actionable`	`Boolean`	`false`	If true, adds additional classes to the link to make it more aware.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Tooltip`

Tooltip that appears on mouse hover or keyboard focus over the button. 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 TooltipComponent documentation for more information.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`text`	`String`	N/A	The text content of the tooltip. This should be brief and no longer than a sentence.
`direction`	`Symbol`	N/A	One of `:bottom`, `:left`, `:right`, or `:top`.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Same arguments as TooltipComponent.

Examples

Default

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

Span as link

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

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

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

Ariadne