Link
Links navigate users to a new page or section. Use the variant that communicates the visual weight of the navigation action.
When to use
Do
- ✓Navigate to a new page or external resource.
- ✓Use primary for the main navigation action in a content block.
- ✓Use secondary for supporting or contextual navigation.
- ✓Use ghost for low-priority in-text navigation.
- ✓Add an icon to reinforce the action (e.g. arrow-right, external-link).
Don't
- ✕Don't use a link to trigger an action — use a button instead.
- ✕Don't use more than one primary link in a single content block.
- ✕Don't rely on colour alone to convey link meaning.
- ✕Don't use vague text like 'click here' — make labels descriptive.
- ✕Don't nest interactive elements inside a link.
Variants
Choose the variant that reflects the visual weight of the navigation action.
Primary — Brand-coloured link. Use for the most prominent navigation action.
Secondary — Subdued colour. Use for supporting navigation next to a primary link.
Ghost — Default text colour. Use for low-priority or inline navigation.
With icon
Icons reinforce the link's action. Use arrow-right for internal navigation, external-link for external URLs, and download for downloadable resources.
<diwa-link href="/docs" icon="arrow-right">Documentation</diwa-link>
<diwa-link href="https://example.com" target="_blank" icon="external-link">External site</diwa-link>
<diwa-link href="/report.pdf" download icon="download">Download report</diwa-link>Compact
Use compact to enable dense mode and reduce link size in tables, metadata blocks, or sidebars.
<diwa-link href="/details" compact>View details</diwa-link>External links
When linking to external resources, always add target="_blank". The component automatically adds rel="noopener noreferrer" to prevent security vulnerabilities.
<diwa-link href="https://example.com" target="_blank" icon="external-link">
Visit site
</diwa-link>