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

@axa-ch/button

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@axa-ch/button

The button component for the AXA Pattern Library

5.2.13
Source
npm

Version published: 4 years ago

Weekly downloads: 0; decreased by-100%

Maintainers: 46

Weekly downloads

Created: 6 years ago

Source

AXA Button

Buttons provide a clickable element, which can be used in forms, or anywhere else where simple, standard call-to-action functionality is needed. They may display text, icons, or both. Buttons can be styled via several properties to change their look-and-feel. If you need a link with button styling, use axa-button-link instead.

Usage

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

npm install @axa-ch/button

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

React

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

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

const AXAButtonReact = createAXAButtonReact(createElement);

export default AXAButtonReact;

<AXAButtonReact motionOff onClick={handler}>
  I am a Button
</AxaButtonReact>

Pure HTML pages

Import the button-defining script and use a button 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>I am a button</axa-button>
    <script src="node_modules/@axa-ch/button/dist/index.js"></script>
  </body>
</html>

Properties

Variant

Attribute	Details
`variant="secondary"`	Button in a ghost state
`variant="red"`	Button red
`variant="inverted"`	Button inverted
`variant="inverted-blue-ocean"`	Button inverted blue ocean
`variant="inverted-red-tosca"`	Button inverted red tosca
`variant="inverted-purple-logan"`	Button inverted purple logan
`variant="inverted-green-viridian"`	Button inverted green viridian
`variant="inverted-blue-teal"`	Button inverted inverted blue teal

Type

Attribute	Details
`type="button"`	Default button type (default if omitted)
`type="submit"`	Submit button submit for forms
`type="reset"`	Reset button for forms

Size

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

motionOff

The Boolean attribute motionoff deactivates hover animation.

disabled

The Boolean attribute disabled disables the button natively.

icon

Based on the string-valued attribute icon, interpreted 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.

className

With this string attribute you can set a CSS class to the component.

FAQs

What is @axa-ch/button?

Is @axa-ch/button popular?

Is @axa-ch/button well maintained?

Package last updated on 31 Aug 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