Link Pure
A minimal text+icon navigation link with no background or border. Use for inline navigation actions where a full-weight link would be too visually heavy.
When to use
Do
- ✓Use for lightweight inline navigation where a full-weight link is too heavy.
- ✓Use to represent the current page in a navigation menu (active prop).
- ✓Add underline for additional visual emphasis on links in dense layouts.
- ✓Use stretch in full-width navigation items that fill available space.
- ✓Always provide label when using hideLabel for screen readers.
Don't
- ✕Don't use link-pure for primary CTAs — use diwa-link instead.
- ✕Don't use link-pure to trigger actions — use diwa-button-pure.
- ✕Don't omit the label prop when hideLabel is true.
- ✕Don't use stretch in inline text contexts.
- ✕Don't nest interactive elements inside a link-pure.
Icon position
Control which side the label appears on relative to the icon using alignLabel. Use arrow-left withalignLabel="start" for a "back" navigation pattern.
<!-- Forward navigation -->
<diwa-link-pure href="/next">Continue</diwa-link-pure>
<!-- Back navigation -->
<diwa-link-pure href="/prev" icon="arrow-left" align-label="start">Back</diwa-link-pure>Active state
Use the active prop to mark the current page in a navigation menu. This also sets aria-current="page" for screen readers.
<diwa-link-pure href="/current" active>Current page</diwa-link-pure>Stretched layout
Use stretch to fill the container width with space between the icon and label — useful for full-width navigation items.
<diwa-link-pure href="/page" stretch>Full-width nav item</diwa-link-pure>