Link
Styled link component with variants and automatic underline styling
Basic Usage
The most basic link with default primary styling:
<neura::link href="#">Default Link</neura::link>Variants
The link component supports three visual variants:
Default (Primary)
<neura::link href="#" primary>Primary Link</neura::link>
<neura::link href="#" primary="false">Non-Primary Link</neura::link>Ghost Variant
<neura::link href="#" variant="ghost">Ghost Link</neura::link>Soft Variant
<neura::link href="#" variant="soft">Soft Link</neura::link>Open in New Tab
Use the openInNewTab prop to open links in a new tab:
<neura::link href="https://example.com" openInNewTab>External Link</neura::link>Use Cases
Navigation Links
External Links
Inline Text Links
Read our
terms and conditions
or check out our
privacy policy
for more information.
<neura::text>
Read our <neura::link href="#">terms and conditions</neura::link>
or check out our <neura::link href="#">privacy policy</neura::link>
for more information.
</neura::text>Best Practices
Do
- Use descriptive link text that indicates where the link goes
- Use openInNewTab for external links
- Choose the appropriate variant based on context
- Make links accessible with proper href attributes
Don't
- Don't use generic text like "Click here" or "Read more"
- Don't open internal links in new tabs unnecessarily
- Don't use links for non-navigation actions (use buttons instead)
- Don't use links without href attributes
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| href | string | required | URL or route for the link destination. |
| primary | boolean | true | Use primary color styling (primary content color). |
| variant | string|null | null | Link variant. Values: 'ghost' (no underline, shows on hover), 'soft' (no underline, muted colors), null (default with underline). |
| openInNewTab | boolean | false | Opens the link in a new tab (sets target="_blank"). |
| class | string | - | Additional CSS classes. Default: inline font-medium text-base text-start underline-offset-[6px] hover:decoration-current |