![New Socket Web Extension, Take Socket with You](https://cdn.sanity.io/images/cgdhsj6q/production/7c7e90f37af51d175eaf8b2ae56124aec35c57c8-874x566.png?w=400&fit=max&auto=format)
Product
New Socket Web Extension, Take Socket with You
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
@lion/button
Advanced tools
Readme
🛠 Status: Pilot Phase
Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.
The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:
- not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
- not publicly promote or link products derived from/based on Lion Web Components
As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)
lion-button
provides a component that is easily stylable and is accessible in all contexts.
You can also set a button as disabled with the disabled
property.
npm i --save @lion/button
import '@lion/button/lion-button.js';
<lion-button>Button Text</lion-button>
There are multiple reasons why we used a Web Component as opposed to a CSS component.
We want to ensure that the event target returned to the user is lion-button
, not button
. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the lion-button
, and ensure delegation inside of there.
By delegating the click()
to the native button, it will bubble back up to lion-button
which would cause duplicate actions. We have to simulate the full .click()
however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
Therefore, on click, we flash a <button>
to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
Flashing the button in the way we do solves almost all issues except for one. One of the specs of W3C is that when you have a form with multiple inputs, pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
To get this particular implicit form submission to work, having a native button in our lion-button
is a hard requirement. Therefore, not only do we flash a native button on the form to delegate lion-button
trigger to button
and thereby trigger form submission, we also add a native button
inside the lion-button
which type
property is synchronized with the type of the lion-button
.
To prevent form submission full page reloads, add a submit handler on the form like so:
<form @submit=${ev => ev.preventDefault()} >
Putting this on the @click
of the lion-button
is not enough.
FAQs
A button that is easily styleable and accessible in all contexts
The npm package @lion/button receives a total of 1,300 weekly downloads. As such, @lion/button popularity was classified as popular.
We found that @lion/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Product
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
Product
Socket introduces three new customizable default security policies for users to choose from: Low Noise (traditional SCA), Default, and Higher Noise.
Security News
MITRE has just minted its 400th CNA, as the NVD struggles to tame its backlog of CVEs awaiting analysis, which has increased by 30% since June.