Link

Inline anchor with an optional plain style and external icon. Size prop: xs, sm, md, lg, xl.

Import

Vue

import { UiLink } from '@ziyarago/ui/vue'

Sizes

View itinerary View itinerary View itinerary View itinerary View itinerary

Vue

<UiLink size="xs" href="#">
  View itinerary
</UiLink>

<UiLink size="sm" href="#">
  View itinerary
</UiLink>

<UiLink size="md" href="#">
  View itinerary
</UiLink>

<UiLink size="lg" href="#">
  View itinerary
</UiLink>

<UiLink size="xl" href="#">
  View itinerary
</UiLink>

Default

View itinerary

Vue

<UiLink href="#">
  View itinerary
</UiLink>

Plain

Plain link without underline

Vue

<UiLink href="#" plain>
  Plain link without underline
</UiLink>

External

Visa requirements

Vue

<UiLink href="https://example.com" external>
  Visa requirements
</UiLink>

API reference

Styled anchor for in-text and standalone links, with optional external-link behavior.

Props

PropType and valuesDefaultDescription

hrefstring'#'Link target.

externalbooleanfalseOpens in a new tab with rel="noopener noreferrer" and shows an external-link icon.

plainbooleanfalseRemoves the underline styling.

sizexssmmdlgxl'md'Font size relative to the surrounding text (0.8em to 1.25em).

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultLink content.

Events

Vue: @name. React: onName.

clickNative click event.

Notes

Without href the link points to "#"; for SPA routing use onClick and prevent default.