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/ui-library

Usage

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-button';
  defineCustomElement();
</script>
<anchor-button text="anchor button" variant="primary" />

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-button text="anchor button" variant="primary" />

Variants

Pass the variant prop to display the desired button variant.

<anchor-button variant="primary" text="anchor button"></anchor-button>
<anchor-button variant="secondary" text="anchor button"></anchor-button>
<anchor-button variant="tertiary" text="anchor button"></anchor-button>

Disabled

Pass the disabled prop to display disabled state of button.

<anchor-button disabled text="anchor button" variant="primary" />

Loading

Pass the loading prop to display a Spinner component inside the button.

<anchor-button loading text="anchor button" variant="primary" />

Icon

You can add icons to the AnchorButton by passing the icon prop and adjust its position with icon-placement prop.

<anchor-button icon="chevron-right" icon-placement="right" text="anchor button" variant="primary" />

Accessibility

• Button has role of button.
• Keyboard event support for Space and Enter keys.
• Mouse and touch event handling, and press state management.
• Keyboard focus management and cross browser normalization.

We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.

CSS variables

With CSS variables you can easily customize parts of the Button component. See the table below for a list of available variables.

Button width and height

Previous versions of the Anchor Button has a fixed width of 200px. Now the Button is fully responsive and will grow with it's content by default. This can easily be overwritten by using the CSS variable, for instance like this:

A custom width:

anchor-button {
  --button-width: 300px;
}

Full width:

anchor-button {
  --button-width: 100%;
}

The height of the button is set to be 48px if the base font-size is 16px. This is because we want the Button to match the height of the Input field by default.

If you wish to keep the Button at a height of 40px, like in previous iterations, you can do this with the --line-height variable.

Total height of 40px:

anchor-button {
  --button-line-height: 1rem;
}

Gap between icon and text

In previous versions of the Button, you could set the gap between icon and text with a prop.

To simplify the interface of the Button, this functionality is now only available as a CSS variable.

Example:

anchor-button {
  --button-gap-icon-text: [your value];
}

Handling click events

Do it as you would with any other element. Consult the documentation for your framework on how handle events. (https://reactjs.org/docs/handling-events.html, https://vuejs.org/v2/guide/events.html, etc...)

In basic vanilla html and javascript it goes like this.

<script>
  // DOM has to be loaded and ready. Not strictly necessary in this case but a good practice.
  // Depending on your framework and/or setup you might already have an implementation in place.
  document.addEventListener('DOMContentLoaded', () => {
    // select button element
    const myButtonEl = document.querySelector('#my-button');

    // add the custom listener
    myButtonEl.addEventListener('click', event => {
      console.log('clicked my button: ', event);
    });
  });
</script>
<anchor-button id="my-button" text="anchor button" variant="primary" theme="brand" />

<!-- inline listener -->
<anchor-button onclick="javascript: console.log('inline event')" text="anchor button" variant="primary" theme="brand" />

Notes

Please note that in order to support partner styling the buttons font-family is inherited. So if you are using a button inside an element with a custom font-style you need to specifically set the button font-family to it's proper value.

API

Button

Properties

Slots

CSS Custom Properties

Dependencies

Depends on

• anchor-spinner
• anchor-icon

Graph

Built with StencilJS