Buttons

Tailwind

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

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Getting Started

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>(icon)</span>
	<span>Skeleton</span>
	<span>(icon)</span>
</button>

Variants

Supports all standard variant styles via .variant-[style]-[color].

html 
<button class="btn variant-filled-primary">Skeleton</button>

Filled

Soft

Ringed

Ghost

Glass

html 
<button class="btn-icon variant-filled-primary">(icon)</button>

Filled

Soft

Ringed

Ghost

Glass

Button Groups

Creates a set of related buttons. Acccepts buttons or anchors and pairs with any variant style.

html 
<div class="btn-group variant-filled-primary">
	<button>Months</button>
	<button>Days</button>
	<button>Years</button>
</div>

A neutral divider color is provided by default, but you can use the Tailwind's abitrary variant syntax to adjust this as desired.

html 
<div class="btn-group variant-ghost-primary [&>*+*]:border-primary-900">...</div>
[&>*+*]:border-red-500
[&>*+*]:border-primary-500

Use the .btn-group-vertical class to set a vertical button group. This can be paired with Tailwind's responsive breakpoints.

html 
<div class="btn-group-vertical variant-filled-primary">...</div>

SvelteKit Link Options

Since Skeleton uses native button elements, this means you can utilize SvelteKit Link Options such as a prefetch.

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