@lion/ui/docs/components/button/examples.md

A package of extendable web components

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

# Button: Examples

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

## Icon button

```js preview-story
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`.

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

## Multiple buttons inline

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