Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Button: Overview

A button web component that is easily stylable and accessible.

export const main = () => html` <lion-button>Default</lion-button> `;


  • Clickable area that is bigger than visual size
  • A special button-reset and button-submit works with native form / inputs
  • button-submit has integration for implicit form submission similar to how native <form>, <input> and <button> work together.


npm i --save @lion/button
import { LionButton, LionButtonReset, LionButtonSubmit } from '@lion/button';
// or
import '@lion/button/define';