lion/docs/components/interaction/button/examples.md

Interaction >> Button >> Examples ||30

import { html } from '@mdjs/mdjs-preview';
import '@lion/button/define';
import iconSvg from './src/icon.svg.js';

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>
`;