Link

Links are used to embedding actions or pathways to more information in a sentence or used in tables with the possibility to drill down to the deeper level.

In other cases preferable to use ghost buttons.

Basic usage

This is link

Source code

<script setup>
  import AcvLink from '@/components/link/link.vue';
</script>

<template>
  <AcvLink>This is link</AcvLink>
</template>

Adding click handlers

INFO

If there are both href and click handler, it would trigger both.

Check console

Will trigger both href and click

Source code

<script setup>
  import AcvLink from '@/components/link/link.vue';

  function handleClick() {
    console.log('Link is clicked');
  }
</script>

<template>
  <div class="acv-text acv-text--body-24">
    <AcvLink @click="handleClick">
      Check console
    </AcvLink>
  </div>
  <div class="acv-text acv-text--body-24">
    <AcvLink
      href="/ui-component-library/components/button/button.doc.html"
      @click="handleClick"
    >
      Will trigger both href and click
    </AcvLink>
  </div>
</template>

Link with path

If the text content is an invalid windows/mac/linux path, the path would not be hidden, and a warning would appear in the console.

INFO

The link has to specify the width of the path.

C:\Users\ui.kit\Desktop\Folder\testfile.txt

/users/ui.kit/desktop/folder/testfile.txt

Source code

<script setup>
  import AcvLink from '@/components/link/link.vue';
  import { vTextMiddleEllipsis } from '@/directives/textMiddleEllipsis.ts';
</script>

<template>
  <div class="acv-text acv-text--body-24">
    <AcvLink href="#/web/utilities">
      <span v-text-middle-ellipsis:show-hover-hint>
        C:\Users\ui.kit\Desktop\Folder\testfile.txt
      </span>
    </AcvLink>
  </div>
  <div class="acv-text acv-text--body-24">
    <AcvLink href="#/web/utilities">
      <span v-text-middle-ellipsis:show-hover-hint>
        /users/ui.kit/desktop/folder/testfile.txt
      </span>
    </AcvLink>
  </div>
</template>

<style scoped>
  .acv-text {
    width: 200px;
  }
</style>

Disabled link

This is disabled link

Source code

<script setup>
  import AcvLink from '@/components/link/link.vue';
</script>

<template>
  <AcvLink disabled>
    This is disabled link
  </AcvLink>
</template>

Link with icon

This is link

Source code

<script setup>
  import AcvLink from '@/components/link/link.vue';
  import { IconPlaceholder16 } from '@acronis-platform/icons/placeholder';
</script>

<template>
  <AcvLink><IconPlaceholder16 /> This is link <IconPlaceholder16 /></AcvLink>
</template>

Accessibility

Provided AcvLink component must adapt to the list of WAI-ARIA link accessibility patterns.

Descriptive Link text

- write link text so that it describes the content of the link target;
- avoid using generic text like "click here" or "more" as it is not descriptive;
- use unique link text for each link on the page;

Keyboard Interaction

- `Enter` or `Space` key activates the link;

Roles and properties

Link text should provide enough information about the target of the link.

Props

Prop name	Description	Type	Values	Default
disabled	Whether the link should be disabled	boolean	-

Events

Event name	Properties	Description
close

Slots

Name	Description	Bindings
default	Default slot for the link content