storybook/docs/snippets/web-components/button-story-with-emojis.js.mdx
2023-11-27 20:57:51 -07:00

27 lines
678 B
Plaintext

```js
// Button.stories.js
import { html } from 'lit';
export default {
component: 'demo-button',
};
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
};
export const Secondary = {
render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
};
export const Tertiary = {
render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
};
```