Diwa Design System

Link

Links navigate users to a new page or section. Use the variant that communicates the visual weight of the navigation action.

Properties

Name	Type	Default	Description
`theme`	`'light' \| 'dark'`	`'dark'`	Per-component theme override.
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'primary'`	Visual style variant.
`href`	`string`	`undefined`	URL the link navigates to. Renders as <a> when set, <span> otherwise.
`target`	`'_self' \| '_blank' \| '_parent' \| '_top'`	`'_self'`	Where to open the linked URL.
`download`	`string`	`undefined`	Triggers browser download dialog for the linked resource.
`rel`	`string`	`undefined`	Relationship of the target. Defaults to noopener noreferrer when target="_blank".
`icon`	`string`	`'none'`	Lucide icon name (kebab-case), or "none" to hide icon.
`hideLabel`	`boolean`	`false`	Visually hides the label (icon-only mode). Always pair with label.
`compact`	`boolean`	`false`	Enables dense mode with a smaller font size.
`label`	`string`	`undefined`	Accessible aria-label for icon-only usage.

Events

diwa-link is a navigation element and emits no custom events.

Slots

Name	Description
`(default)`	Link label text or mixed content.

CSS shadow parts

Part	Description
`base`	The inner <a> or <span> element.
`label`	The label span wrapping the slotted content.