lion/docs/components/button/examples.md

title	parts	eleventyNavigation
Button: Examples	Button Examples	key order parent title Button: Examples 30 Button Examples

Button: Examples

import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-button.js';
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>
`;