Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Button: Examples

Icon button

export const iconButton = () => html`<lion-button>${iconSvg(html)}Bug</lion-button>`;

Icon only button

When only an icon is used, make sure the button still have an accessible name, via aria-label.

export const iconOnly = () => html`<lion-button aria-label="Bug">${iconSvg(html)}</lion-button>`;

Multiple buttons inline

export const mainAndIconButton = () => html`
  <lion-button>Default</lion-button>
  <lion-button>${iconSvg(html)} Bug</lion-button>
`;