Button

Example Usage

<script>
  import { Button } from "@fanny-pack-ui/svelte-kit";

  let creatingAccount = false;

  function handleCreateAccount() {
    creatingAccount = true;
    setTimeout(() => creatingAccount = false, 3000);
  }
</script>

<Button
  id="some-id"
  type="button"
  bgColor="var(--btn-default-bg-color)"
  borderColor="var(--btn-default-border-color)"
  textColor="var(--btn-default-text-color)"
  padding="var(--btn-default-padding)"
  fontSize="var(--btn-default-font-size)"
  width="auto"
  disabled={creatingAccount}
  btnIcon="bi:person-plus-fill"
  btnIconDisabledShouldSpin={true}
  btnIconSide="right"
  on:click={handleCreateAccount}
  rotateBtnIcon="45deg"
>
  Create Account
  <span slot="btnTextDisabled">Creating Account...</span>
</Button>

How to use as the submit button in a <form>

<script>
  let sendingForm = false;
  let name = "";
  let subject = "";
  let email = "";
  let message = "";

  // Not an actual form validation.
  $: checkValidation = () => {
    let isInvalid = true;
    if (name && subject && email && message) {
      isInvalid = false;
    }
    return isInvalid;
  }

  async function handleSubmit(event) {
    sendingForm = true;

    // Custom event listener goes here.
    // See https://kit.svelte.dev/docs/form-actions#progressive-enhancement-custom-event-listener
  }
</script>

<form method="POST" on:submit|preventDefault={handleSubmit}>
  <Input type="text" bind:value={name} label="Your Name" />
  <Input type="text" bind:value={subject} label="Subject" />
  <Input type="text" bind:value={email} label="Your Email Address" />
  <Textarea bind:value={message} label="Message" rows="5" />
  <Button type="submit" disabled={sendingForm} formIsInvalid={checkValidation()} btnIcon="fa:send">
    Send
  </Button>
</form>

Interactive Example

Icon Buttons

You can create buttons that have only icons (i.e. no text). Do not pass any slots in between the opening <Button> and closing </Button> tags and provide the btnIcon and/or btnIconDisabled props.

<script>
  let savingData = false;

  function handleSaveData() {
    savingData = true;
    setTimeout(() => savingData = false, 3000);
  }
</script>

<Button
  btnIcon="ion:save-sharp" 
  padding="10px"
  fontSize="24px"
  disabled={savingData}
  title="Save File"
  on:click={handleSaveData}
></Button>

Another option for creating icon buttons is to pass an Iconify icon component to the default slot:

<script>
  import Icon from "@iconify/svelte";

  let savingData = false;

  function handleSaveData() {
    savingData = true;
    setTimeout(() => savingData = false, 3000);
  }
</script>

<Button
  btnIcon=""
  padding="10px 20px"
  disabled={savingData}
  title="Save File"
  on:click={handleSaveData}
>
  <Icon icon="ion:save-sharp" width=40 />
  <span slot="btnTextDisabled">
    <Icon icon="icomoon-free:spinner2" class="fp-spin" width=40 />
  </span>
</Button>

NOTES:

• You need to set btnIcon="" to remove any other icons that would be displayed as part of this <Button> component’s props.
• You can pass another icon to the btnTextDisabled slot if you want to display a disabled state.
• The nice thing about this option is that you can set any Iconify props on the <Icon> component (e.g. the width prop in the example above.)

Custom Button Style Props

There are situations where you might want to tweak (or even completely overhaul) the look of a button. For example, you might need uniquely styled buttons when creating a login page that has buttons for different authentication providers or maybe you want to make some minor modifications to the styles of buttons in your header or footer.

You can customize these buttons almost infinitely by passing different values to the bgColor, borderColor, textColor, padding, and fontSize props. You can also change or remove the button icons.

Props

Slots

Event Forwarding

Style Notes

Depending on the colors that you use as your primary, secondary, and tertiary colors, you might need to change the values for the button text colors in your theme.css file. These are the class names that you need to look at:

"text-color-for-primary-bg"
"text-color-for-secondary-bg"
"text-color-for-tertiary-bg"