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-icon-container button-title="Close">
    <anchor-icon name="x" size="small"></anchor-icon>
  </anchor-icon-container>
</template>

<script setup>
import { AnchorIconContainer, AnchorIcon } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-icon-container button-title="Close">
    <anchor-icon name="x" size="small"></anchor-icon>
  </anchor-icon-container>
</template>

Disabled

<template>
  <anchor-icon-container button-title="Close" disabled>
    <anchor-icon name="x" size="small"></anchor-icon>
  </anchor-icon-container>
</template>

On Dark

<template>
  <anchor-icon-container button-title="Close" theme="on-dark">
    <anchor-icon name="x" size="small"></anchor-icon>
  </anchor-icon-container>
</template>

Slot

Example of using Icon with Icon Container:

<template>
  <anchor-icon-container button-title="Close">
    <anchor-icon name="x" size="small"></anchor-icon>
  </anchor-icon-container>
</template>

Notice that the Icon Container is designed to use an Icon in size="small".

Props

• theme: The theme of the button. Can be "default" or "on-dark". Defaults to "default". Use "on-dark" when the Icon Container is placed on a dark background.
• button-title: The text to display when the user hovers over the button.

States

• default: The default state of the button.
• hover: The state of the button when the user hovers over it.
• pressed: The state of the button when the user clicks on it.
• focus: The state of the button when it has focus.

Accessibility

• The icon container renders as a native <button> element, providing inherent keyboard support and focus management.
• Use the ariaLabel prop to provide an accessible name for screen readers. This is especially important when the icon conveys an action that isn't otherwise described in visible text.
• The title prop provides hover text for mouse users but does not replace ariaLabel for screen reader users. Use both for the best experience.
• Keyboard event support for Tab to focus, and Enter / Space to activate.
• When disabled is set, the button removes itself from the tab order and ignores keyboard and mouse events, consistent with native disabled button behavior.

API

anchor-icon-container

Properties

Dependencies

Used by

• anchor-navigation-card

Graph

graph TD;
  anchor-navigation-card --> anchor-icon-container
  style anchor-icon-container fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS