11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
42 lines
878 B
Markdown
42 lines
878 B
Markdown
---
|
|
parts:
|
|
- Button
|
|
- Examples
|
|
title: '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>
|
|
`;
|
|
```
|