Link Buttons

Link buttons provide visually distinct call-to-action elements that guide users to important pages or resources.

Basic Usage

The simplest link button requires only an href attribute:

Variants

Link buttons come in three variants to match different emphasis levels.

Primary (Default)

Use primary buttons for the most important actions:

Secondary

Secondary buttons are less prominent but still noticeable:

Minimal

Minimal buttons blend more with the text while still being clickable:

Multiple Buttons

You can place multiple buttons together:

Icons

Add icons to make buttons more expressive.

Arrow Icons

External Link Icons

Use for links to external resources:

Other Icons

Icon Placement

By default, icons appear at the end. Use iconPlacement to change this:

Icon at Start

Icon at End (Default)

External Links

External links automatically open in a new tab with security attributes:

This prevents window.opener vulnerabilities and improves security.

Real-World Examples

Course Landing Page

Documentation Navigation

External Resources

Available Icons

The following icons are supported:

• arrow or arrow-right →
• arrow-left ←
• external ↗
• download ⬇
• github →
• rocket 🚀
• star ⭐
• check ✓
• chevron-right ›
• chevron-left ‹
• plus +

Best Practices

Use Primary Sparingly

Only use one primary button per section to maintain clear hierarchy:

✅ Good:

❌ Avoid:

Clear Button Text

Button text should be actionable and describe what happens when clicked:

✅ Good:

• "Get Started"
• "Download Guide"
• "View Documentation"

❌ Avoid:

• "Click Here"
• "Link"
• "More"

External Link Icons

Always use the external icon or similar for external links:

Accessibility

Link buttons are built with accessibility in mind:

• Keyboard navigable (Tab to focus, Enter to activate)
• Focus indicators for keyboard users
• Proper ARIA attributes
• Screen reader friendly
• High contrast mode support
• Respects prefers-reduced-motion

Responsive Design

Link buttons automatically adapt to smaller screens:

• Full-width on mobile devices
• Adjusted padding for touch targets
• Proper spacing in button groups

Syntax Reference

:::link-button{href="URL" variant="VARIANT" icon="ICON" iconPlacement="PLACEMENT"}
Button Text
:::

Attributes:

• href (required) - Destination URL
• variant (optional) - primary | secondary | minimal (default: primary)
• icon (optional) - Icon name from available icons list
• iconPlacement (optional) - start | end (default: end)

Related Components

• Link Cards: For rich preview cards with metadata
• Cards: For grouped content blocks
• Asides: For callouts and notes