Buttons

Tailwind

Provides a robust set of button styles, including preset variants.

@skeletonlabs/skeleton
View Source
Doc Source

Examples

html 
<button class="btn bg-primary-500 btn-base text-white">Skeleton</button>

Usage

Button

Add the .btn class to any button or anchor to create a button with minimal styling.

html 
<button class="btn">Button</button>
<a href="/" class="btn">Anchor</a>
Anchor

Icon Buttons

Add the .btn-icon class to any button or anchor to create a icon button with minimal styling.

html 
<button class="btn-icon">B</button>
<a href="/" class="btn-icon">A</a>
A

Leading and Trailing Icons

By default, buttons use flex-row and space-x-4 to create an evenly spaced row. Wrap children with span tags to ensure spacing works as expected.

html 
<button class="btn bg-primary-500">
	<span>💀</span>
	<span>Icons</span>
	<span>ðŸĶī</span>
</button>

Variants

A set of canned preset styles are available using .btn-[variant]. This works for both standard and icon buttons.

html 
<button class="btn btn-filled-primary">filled-primary</button>
html 
<button class="btn-icon btn-filled-primary">💀</button>

SvelteKit Link Options

Since we use native elements, this means we can utilize SvelteKit Link Options such as a prefetch.

html 
<a href="/" class="btn" data-sveltekit-prefetch>Skeleton</a>