Button

A component that can switch between a button and an anchor tag based on the href prop.

Usage

<script lang="ts">
	import { Button } from 'uisv';
</script>

<Button
	label="Button"
	class="border px-4 h-8 border-surface-accented transition-all text-sm font-medium
	hover:bg-surface-muted active:translate-y-0.5"
/>

<Button
	icon="i-lucide:arrow-up"
	class="border size-8 grid place-items-center border-surface-accented transition-all
	hover:bg-surface-muted active:translate-y-0.5"
/>

Loading state

Use loadingauto to automatically show a spinner while the onclick handler's Promise is pending.

<Button label="Button" onclick={async_fn} />

<Button icon="i-lucide:arrow-up" onclick={async_fn} />

Link

You can pass href to render as a link, as well as any anchor property.

Components

<Button href="/components" label="Components" />

<Button href="https://github.com/ui-sv/uisv" icon="i-lucide:github" />

API References

Props

Prop	Type	Description
`disabled`	`boolean`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: `false`
`ref`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: ---
`label`	`string`	String version of the children snippet. Easier if you want to self close the button tag. Default: ---
`icon`	`string`	Icon name to render with iconify syntax naming. Default: ---
`iconposition`	`"leading" \| "trailing"`	Which position you want to display the icon. Default: ---
`trailingicon`	`string`	When you need a trailing icon. Default: ---
`href`	`string`	An optional prop that when passed converts the button into an anchor tag. Default: ---
`loadingauto`	`boolean`	Automatically set icon to a spinner icon. Default: `true`
`children`	`Snippet`	Default: ---

Snippets

Snippet	Props	Description
`children`	---	When you need more than just text.
`trailing`	---	An optional snippet when you want more than a trailing icon.
`leading`	---	An optional snippet when you want more than a leading icon.

UI

Key	Class	Data attrs
`disabled`	`boolean`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: `false`
`ref`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: ---
`label`	`string`	String version of the children snippet. Easier if you want to self close the button tag. Default: ---
`icon`	`string`	Icon name to render with iconify syntax naming. Default: ---
`iconposition`	`"leading" \| "trailing"`	Which position you want to display the icon. Default: ---
`trailingicon`	`string`	When you need a trailing icon. Default: ---
`href`	`string`	An optional prop that when passed converts the button into an anchor tag. Default: ---
`loadingauto`	`boolean`	Automatically set icon to a spinner icon. Default: `true`
`children`	`Snippet`	Default: ---