@isoftdata/svelte-button

Svelte Button

This component will conditionally render a HTML <button> or <a> element based on if a href prop is passed. This component uses Svelte's spread attributes to apply any additional props you pass as attributes on the HTML element.

Install

npm i @isoftdata/svelte-button

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks
• Deprecate iconClass prop. The icon prop can now accept an icon name or an object
• Removed block prop. Bootstrap 5 no longer supports the btn-block class. Apply d-block w-100 classes for the same behavior.

Props

Prop	Type	Description	Default
button	HTMLButtonElement | HTMLAnchorElement	Either the <button> or <a>. Useful if you want to fire events directly on it.	(The button or anchor tag)
color	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link"	The bootstrap color of the button.	"primary"
colorGreyDisabled	boolean	Whether the button is greyed out when disabled.	true
disabled	boolean	Whether the button is disabled.	false
download	string | null	The filename to download when the button is clicked.	null
href	string | null	The URL to link to when the button is clicked.	null
icon	IconName | ComponentProps<typeof Icon>	The name of a FontAwesome icon, or an object of Icon component props.	{ class: "", color: null, style: null, prefix: "fas", fixedWidth: true, icon: null }
id	string | null	The ID of the button.	null
outline	boolean	Whether the button is outlined.	false
size	"" | "xs" | "sm" | "lg"	The size of the button.	""
style	string | null	The inline style of the button.	null
target	string | null	The target of the link when the button is clicked.	null
textClass	string | null	Any classes to apply to the button text	null
title	string | null	The title of the button.	null
type	"button" | "submit" | "reset"	The type of the button.	"button"
wrap	boolean	Whether the button should wrap its contents.	false
isLoading	boolean	Whether the button is showing a loading icon (and disabled)	false

Any extra props (such as onclick) are applied to the button/anchor tag as well.

Example

<script>
	import Button from "@isoftdata/svelte-button"
</script>

<Button
	color="primary"
	icon="0"
	onclick={() => alert("Clicked!")}
	>
	Click Me!
</Button>
<Button
	color="danger"
	outline
	icon={ { icon: "1" } }
	size="xs"
	href="https://google.com"
	target="_blank"
>
	Google
</Button>