Link — lunaDOM Docs

The <luna-link> component provides styled anchor links with multiple variants and decorator support.

Paths

/lunadom/components/link/link.js

REQUIRED

Inline & Text Links

This is an example of an inline link within a block of text. It supports disabled states as well.

← Back to Safety

External Link ↗

Button Variants

Primary Link

Secondary Link

Customization

Slots
default - The primary content of the link
prefix - Content to display before the link text
suffix - Content to display after the link text

Attributes
variant - The visual style of the link (link, primary, secondary)
href - The URL the link points to
target - Where to open the link (e.g., '_blank')
disabled - Whether the link is disabled

CSS Variables
--luna-link-color - The text color of the link
--luna-accent - The primary accent color for links and buttons
--luna-link-hover-color - The text color when the link is hovered

Example Code

<luna-link href="#">inline link</luna-link> <luna-link href="#" disabled>disabled link</luna-link>  <luna-link href="#"> <span slot="prefix">←</span> Back to Safety </luna-link> <luna-link href="#" target="_blank"> External Link <span slot="suffix">↗</span> </luna-link>  <luna-link href="#" variant="primary">Primary Link</luna-link> <luna-link href="#" variant="secondary">Secondary Link</luna-link>