@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 $$restProps to apply any additional props you pass as attributes on the HTML element.

Install

npm i @isoftdata/svelte-button

Props

Prop	Type	Description	Default
block	boolean	Render the button as block, spanning the whole width of its parent.	false
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"	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	object	All options relating to the Icon component.	{ class: "", color: null, style: null, prefix: "fas", fixedWidth: true, icon: null }
iconClass	string | null	The FontAwesome icon name, excluding the leading fa-, e.g. pencil. Either specify this prop, or icon.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

Example

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

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