BYOCSS (Bring Your Own CSS) Svelte Components
Button The button allows the user to preform an action or make a selection.
This example uses TailwindCSS 
<div class="flex flex-row gap-3">
  <Button variant="example-default" on:click={() => alert('Clicked')}
    >No Icon</Button
  >
  <Button variant="example-alt">
    Save
    <span slot="trailingIcon">
      <DeviceFloppy size="1.5rem" />
    </span>
  </Button>
  <Button disabled variant="example-disabled" on:click={() => alert('Clicked')}
    >Disabled</Button
  >
  <div class="flex flex-col justify-end">
    <Button variant="example-dense">
      Dense
      <span slot="icon">
        <Trash size="1.5rem" />
      </span>
    </Button>
  </div>
</div>
Props
Name
Type
Default
Description
variant string 'default'
This defines which variant of the button component from your theme configuration will be applied.
css string
Extra css classes you would like to have applied to the main button component.
disabled boolean false
Will disable the button and prevent click events from firing. When disabled the component will look for a variant either called "{variant}-disabled" or "disabled"
on:click VoidFunction
A function that will be called on click of the button.
Slots
Name
Description
This will be placed to the right of an icon (if provided) and to the left of a tailing icon (if provided).
icon
An icon that will be placed on the left of the button.
trailingIcon
An icon that will be placed on the right side of the button.
Theme
Name
Type
Description
icon string | object
It can be a single string containing all styles applied to the icon or it can be an object broken up in to multiple props.
style string | object
The name of this prop could be anything other than "icon". It can be a single string containing all styles applied to the button or it can be an object broken up in to multiple props.