New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@axa-ch/button-link

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@axa-ch/button-link

The button-link component for the AXA Pattern Library

5.0.3
Source
npm

Version published: 4 years ago

Weekly downloads: 3; decreased by-97.78%

Maintainers: 54

Weekly downloads

Created: 6 years ago

Source

AXA Button Link

Button links provide link functionality, but in the style of a button. They may display text, icons, or both. Button links can be styled via several properties to change their look-and-feel. If you need a semantically correct button, use axa-button instead.

Usage

Important: If this component needs to run in Internet Explorer 11, you need to use our polyfill.

npm install @axa-ch/button-link

import '@axa-ch/button-link';
...
<axa-button-link>I am a button link</axa-button-link>

React

Create a React-ified button link with the createElement function from your React version and then use it like this:

import { createElement } from 'react';
import createAXAButtonLinkReact from '@axa-ch/button-link/lib/index.react';

const AXAButtonLinkReact = createAXAButtonLinkReact(createElement);

export default AXAButtonLinkReact;

<AXAButtonLinkReact href="#axa" motionOff onClick={handler}>
  I am a Button Link
</AxaButtonReact>

Pure HTML pages

Import the button-link-defining script and use a button link like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Your awesome title</title>
  </head>
  <body>
    <axa-button-link>I am a button link</axa-button-link>
    <script src="node_modules/@axa-ch/button-link/dist/index.js"></script>
  </body>
</html>

Properties

Variant

Attribute	Details
`variant="secondary"`	Button link in a ghost state
`variant="red"`	Button link red
`variant="inverted"`	Button link inverted

Href

The string-valued attribute href is used like in a native <a> hyperlink.

External

The Boolean attribute external adds the target="_blank" functionality.

Size

Attribute	Details
`size=""`	Default button medium size
`size="small"`	button small size
`size="large"`	button large size

motionOff

The Boolean attribute motionoff deactivates the hover animation.

disabled

The Boolean attribute disabled disables the button natively.

icon

Using the attribute icon's string value as icon name, an icon will be rendered. To see the full list of possible icons, see the axa-icon README.

onClick

The function-valued attribute onClick can be used as a callback prop for React and other frameworks.

FAQs

What is @axa-ch/button-link?

Is @axa-ch/button-link popular?

Is @axa-ch/button-link well maintained?

Package last updated on 09 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install