Link

Type

Color type: accent, success, error, warning.

<script setup lang="ts"> import { NmorphLink } from "@nmorph/nmorph-ui-kit"; </script><template> <div class="link-type-overview"> <NmorphLink type="accent">Accent</NmorphLink> <NmorphLink type="success">Success</NmorphLink> <NmorphLink type="warning">Warning</NmorphLink> <NmorphLink type="error">Error</NmorphLink> </div> </template>

Underline

Underline the link.

<script setup lang="ts"> import { NmorphLink } from "@nmorph/nmorph-ui-kit"; </script><template> <div class="link-underline-overview"> <NmorphLink>Without underline</NmorphLink> <NmorphLink underline>Underlined</NmorphLink> </div> </template>

Disabled

Inactive state of the link.

<script setup lang="ts"> import { NmorphLink } from "@nmorph/nmorph-ui-kit"; </script><template> <div class="link-disabled-overview"> <NmorphLink disabled type="accent">Accent</NmorphLink> <NmorphLink disabled type="success">Success</NmorphLink> <NmorphLink disabled type="warning">Warning</NmorphLink> <NmorphLink disabled type="error">Error</NmorphLink> </div> </template>

Icon name

Adds an icon before the link text by icon name.

<script setup lang="ts"> import { NmorphLink } from "@nmorph/nmorph-ui-kit"; </script><template> <div class="link-icon-name-overview"> <NmorphLink icon-name="edit">Edit</NmorphLink> <NmorphLink icon-name="eye" underline text="Lorem ipsum" /> </div> </template>

NmorphLink Api

Attributes

Slots

Resolution is not supported

Open the documentation on a device with a screen size of at least 375px by 640px.