fbredius/storybook

View on GitHub
docs/snippets/svelte/button-implementation.js.mdx

Summary

Maintainability
Test Coverage
```html
<!-- Button.svelte -->

<script>
  import { createEventDispatcher } from 'svelte';
  /**
   * Is this the principal call to action on the page?
   */
  export let primary = false;

  /**
   * What background color to use
   */
  export let backgroundColor;
  /**
   * How large should the button be?
   */
  export let size = 'medium';
  /**
   * Button contents
   */
  export let label = '';

  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';

  const dispatch = createEventDispatcher();

  /**
   * Optional click handler
   */
  function onClick(event) {
    dispatch('click', event);
  }
</script>

<button type="button" {style} on:click="{onClick}">{label}</button>
```