Variant

Use the variant prop to change the visual style of the Button.

Preview

containedoutlinedtext

Code

<script lang="ts">
  import { Constants } from "@fefade/core"
  import { Button } from "@fefade/svelte"
</script>

<div
  style="
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  "
>
  {#each Constants.variants as variant (variant)}
    <Button {variant}>{variant}</Button>
  {/each}
</div>

Color

Use the class or style prop to change the color of the button.

Preview

successwarningerrorinfo aqua

Code

<script lang="ts">
  import { Constants } from "@fefade/core"
  import { Button } from "@fefade/svelte"
</script>

<div style="display:flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;">
  {#each Constants.statusColors as color (color)}
    <Button class="bg-{color} text-on-{color}">
      {color}
    </Button>
  {/each}
  <Button style="background: aqua;">aqua</Button>
</div>

Size

Use the size prop to change the size of the button.

Preview

xssmmdlgxl

Code

<script lang="ts">
  import { Constants } from "@fefade/core"
  import { Button } from "@fefade/svelte"
</script>

<div style="display:flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;">
  {#each Constants.sizes as size (size)}
    <Button {size}>{size}</Button>
  {/each}
</div>

Loading

Pass the isLoading props to the Button component to show a loading spinner.

Preview

Code

<script lang="ts">
  import { Button } from "@fefade/svelte"
</script>

<Button isLoading disabled></Button>
<Button isLoading></Button>

Icon

Use icons within a button.

Preview

heart

Code

<script lang="ts">
  import { Button } from "@fefade/svelte"
</script>

<Button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="16px"
    viewBox="0 -960 960 960"
    width="16px"
    fill="red"
  >
    <path
      d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z"
    />
  </svg>
  heart
</Button>

Link

Use the href and target optional prop to render a button as a link.

Preview

Link

Code

<script lang="ts">
  import { Button } from "@fefade/svelte"
</script>

<Button href="https://github.com/dxdns" target="_blank">Link</Button>

Disabled

Use the disabled prop to disable the button.

Preview

Disabled

Code

<script lang="ts">
  import { Button } from "@fefade/svelte"
</script>

<Button disabled>Disabled</Button>

Pressed effect

Press effect is enabled by default. Use the pressedEffect prop to disable pressed effect the button.

Preview

No pressed effect Pressed effect

Code

<script lang="ts">
  import { Button } from "@fefade/svelte"
</script>

<Button pressedEffect={false}>No pressed effect</Button>
<Button>Pressed effect</Button>