Svelte Button

A simple button component made in Svelte

Demo

Try it in the Storybook

Installation

Yarn

yarn add svelte-button

NPM

npm install --save svelte-button

Usage

Basic

<script>
  import Button from "svelte-button";

  function handleChange(e) {
    console.log("Event: ", e);
  }
</script>

<Button
  on:change={handleChange}
>
  Svelte Button
</Button>

Custom Attributes

It is possible to add the following attributes to the button:

• id
• disabled
• type
• tabindex

And with the containerClass prop is possibile to assign a custom class to the container of the button.

Custom Template

Between the opening and closing "Button" tag you can insert the custom template that you want. For example to achieve a template with a left icon you can do as following:

<Button on:change={handleChange} variant="outline">
  <img src="path/to/icon.svg" alt="custom icon" />
  Save
</Button>

Styling

With the variant property you can choose between 3 different buttons styles:

• solid
• outline
• link

To override the default color scheme there are available primaryColor and secondaryColor properties.

<Button
  id="svelte-btn"
  variant="outline"
  primaryColor="red"
  secondaryColor="yellow"
  on:change={handleChange}
>
  Svelte Button
</Button>

<style>
  :global(#svelte-btn) {
    font-size: 26px;
  }
</style>

Props

All the props are optional.

Events