Development

Buttons

It can be tedious writing different bits of code to manipulate the DOM and fill in forms programmatically. Things like checking a checkrelative block w-full or selecting an option in a dropdown list. This plain, vanilla javascript plugin takes JSON data and uses it to fill out any form field.

Hyperlink Button

Basic Button

This is the basic button.

i.e. <button type="button">Click here</button>

type|string

					
<form action="/dev/sveltekit-components/buttons">
     <Button type="submit">No Default styles</Button>
</form>

Buttons can also be hyperlinks. This is a true hyperlink styled like a button, it's the same as <a href="/dev/sveltekit-components/buttons">Click here</a>

Hyperlink button href|string


<Button href="/dev/sveltekit-components/buttons">Hyperlink buttons</Button>

The class property works just like html's class attribute.

class|string


<Button class="buttonStyle">Styled with class</Button>

So does the style attribute.

style|string


<Button style="border-radius: 9999px;">Styled with attribute</Button>

and the disabled attribute.

disabled|boolean


<Button disabled>Disabled</Button>

There is also some fancy stuff. Like the btnLoading prop, which puts the button in a loading state.

btnLoading|boolean


<Button btnLoading>text doesn't matter</Button>
OR
<Button btnLoading />

The btnSuccess prop works just like the btnLoading prop.

btnSuccess|boolean


<Button btnSuccess>text doesn't matter</Button>
OR
<Button btnSuccess />

A click event is dispatched from the button component to imitate svelte built in on:click.


<Button on:click={alertUser}>Executes Func</Button>

The unstyled property removes all the default styles from the buttons.

unstyled|boolean


<Button unstyled>Unstyled</Button>

You can also combine properties to make something different. For example, let's say we want a special button that will open a newTab. We want to style this button differently to show its special behavior. First remove all default styles with the unstyled property. Then I re-style the button with the class property.

Click here


<Button unstyled class="specialButton" href="/dev/sveltekit-components/buttons" newTab>Click here</Button>

The buttons inner content is filled using sveltes slot feature so inner HTML works fine .

Inner HTML href|string


<Button href="/dev/sveltekit-components/buttons"><i class="fa-solid fa-face-smile" /> Inner HTML</Button>