Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-help-box>
    <span slot="header">Header</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc.
    <a href="http:://www.example.com" slot="link">Link to more info</a>
  </anchor-help-box>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorHelpBox } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-help-box>
    <span slot="header">Header</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc.
    <a href="http:://www.example.com" slot="link">Link to more info</a>
  </anchor-help-box>
</template>

With icon

With close button

Enable the close button using the can-close prop.

<script setup>
import { ref } from 'vue';
import { AnchorHelpBox } from '@tryg/vue-ui-library';

const isVisible = ref(true);
</script>
<template v-if="isVisible">
  <anchor-help-box can-close @closed="isVisible = false">
    <span slot="header">Header</span>
    This help box can be closed.
  </anchor-help-box>
</template>

Accessibility

The Help Box is a non-interactive informational component rendered as a <div>, with no intrinsic ARIA role beyond standard document flow.
When canClose is enabled, a close button is rendered inside the help box. Use the close-button-aria-label prop to provide a descriptive label for screen readers.
Content delivered through the header and default slots should use semantic HTML elements (such as <h2> or <p>) to maintain proper heading hierarchy and readability for assistive technologies.
Icons slotted into the icon slot are decorative by default (aria-hidden="true"), so they will not be announced by screen readers.

API

anchor-help-box

Properties

Property	Attribute	Description	Type	Default
`canClose`	`can-close`	to close the help box if needed	`boolean`	`false`
`closeButtonAriaLabel`	`close-button-aria-label`	arialabel for close button icon in banner- used for accessibility	`string`	`undefined`
`closeButtonTitle`	`close-button-title`	title for close button icon	`string`	`undefined`
`uuid`	`uuid`	Give this instance of help-box a custom ID, or keep the default.	`string`	`uuidv4()`

Events

Event	Description	Type
`closed`	Event emitted when the close icon is clicked.	`CustomEvent<void>`

Methods

`close() => Promise<void>`

Handles the click event of the close icon.

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

graph TD;
  anchor-help-box --> anchor-icon-button
  anchor-help-box --> anchor-icon
  style anchor-help-box fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Help Box3.0