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

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

Disabled

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

On dark

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

Slot

• icon: The icon to display inside the button.

The Icon Button does not display an Icon on it's own. The Icon is implemented as a slot to allow total freedom.

Use the attribute slot="icon" to show an Icon in Icon Button.

Example of using Icon with Icon Button:

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

Notice that the Icon Button 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 Button is placed on a dark background.
• buttonTitle: 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

• Renders as a native <button> element by default, inheriting standard button semantics including role and keyboard behavior.
• Keyboard support: Enter and Space activate the button when it has focus.
• Always provide an ariaLabel prop to give screen readers a meaningful description, since icon-only buttons lack visible text.
• The buttonTitle prop sets the title attribute on the button, providing a tooltip on hover for visual users.
• When disabled, the button receives the native disabled attribute, making it both non-interactive and skipped by keyboard navigation.

CSS variables

The following CSS custom properties are exposed:

API

anchor-icon-button

Properties

CSS Custom Properties

Dependencies

Used by

• anchor-help-box
• anchor-navigation-card
• anchor-notification-banner
• anchor-quantity

Graph

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

Built with StencilJS