We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

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');

<template>
  <anchor-notification-inline>
    This is an error message.
  </anchor-notification-inline>
</template>

<script setup>
import { AnchorNotificationInline } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-notification-inline>
    This is an error message.
  </anchor-notification-inline>
</template>

Error notification

Header slot

You can give the notification a bold header by using the header slot.

Using the link slot

You can give the notification a link by using the link slot. Remember that you have to use an <a> tag in the slot. And you have to use the slot="link" attribute on the <a> tag.

Example:

Accessibility

• Uses role="alert" for error and warning types, and role="status" for info and success types, so screen readers announce them appropriately.
• The type prop determines the ARIA role, allowing assistive technology to convey the correct level of urgency.
• Icon visually conveys severity (alert-triangle for error, info for info, check-circle for success, alert-circle for warning).
• Supports aria-live regions for dynamically inserted notifications, ensuring screen reader users are notified of new content.
• For dynamically added notifications, consider using aria-live="assertive" on error messages to interrupt the user's current task.

CSS variables

The following CSS custom properties are exposed:

API

Inline notification

Properties

CSS Custom Properties

Dependencies

Depends on

• anchor-icon

Graph

graph TD;
  anchor-notification-inline --> anchor-icon
  style anchor-notification-inline fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS