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.

Variants

Primary
<diwa-link variant="primary" href="#">Primary</diwa-link>
Secondary
<diwa-link variant="secondary" href="#">Secondary</diwa-link>
Ghost
<diwa-link variant="ghost" href="#">Ghost</diwa-link>
Danger
<diwa-link variant="danger" href="#">Danger</diwa-link>

With icon

With IconExternalDownload
<diwa-link variant="primary" href="#" icon="arrow-right">With Icon</diwa-link>
<diwa-link variant="secondary" href="#" icon="external-link">External</diwa-link>
<diwa-link variant="ghost" href="#" icon="download">Download</diwa-link>

Compact

Compact PrimaryCompact SecondaryCompact Ghost
<diwa-link variant="primary" href="#" compact>Compact Primary</diwa-link>
<diwa-link variant="secondary" href="#" compact>Compact Secondary</diwa-link>
<diwa-link variant="ghost" href="#" compact>Compact Ghost</diwa-link>

Disabled

Primary DisabledSecondary DisabledGhost Disabled
<diwa-link variant="primary" href="#" disabled>Primary Disabled</diwa-link>
<diwa-link variant="secondary" href="#" disabled>Secondary Disabled</diwa-link>
<diwa-link variant="ghost" href="#" disabled>Ghost Disabled</diwa-link>