Button

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Props

id string
You can pass in an ID to the component if you need to reference it later. If you do not pass an ID, there will be a unique id added to the component.

label string Submit
This is the text label that the button will have. Defaults to "Submit".

color string primary
Pass in one of the named color variables like success or error-light.

onclick function
Pass a function that you would like to run when this button is clicked

onsubmit function
If you are using the button as part of a Form element, use onsubmit instead of onclick.

href string
If this button will taking a user to a different page, use href instead of directing them to the page with onclick. This will prefetch the data on hover to make the navigation faster.

new_page boolean false
Pass true if you want this button to open the page contents in a new page.

wide boolean true
Pass true if you want the button to take the full width of it's parent container.

mt number 0
The top margin in rem values.

mb number 0
The bottom margin in rem values.

<script>
  import { Button, showLoading, hideLoading } from "bubbles-ui";

  const props = {
    id: "123",
    label: "Complete",
    color: "secondary", //secondary-light for light button or secondary-border for border button
    onclick: (event) => {
      const id = event.currentTarget.id;

      console.log(`Button ${id} clicked`);

      showLoading(id); //will show the loading state

      //hide the loading button after a promise resolves
      fetch("/")
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          hideLoading(id);
        });
    },
    wide: true,
  };
</script>

<Button {...props} />