Buttons

Button

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

<button class="btn">Button</button>

<a href="/" class="btn">Anchor</a>

Icon Buttons

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

<button class="btn-icon">B</button>

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

Styling

Use Tailwind utilty classes to enhance the button styling.

<button class="btn bg-primary-500">Skeleton</button>

Sizes

Adjust the button size with .btn-[sm|base|lg|xl]. Sizing is controlled using text size and padding.

<button class="btn btn-lg bg-primary-500">Large</button>

Adjust the icon button size with .btn-icon-[sm|base|lg|xl]. Sizing is controlled using text size, aspect square, and width.

<button class="btn-icon btn-icon-lg bg-primary-500">lg</button>

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.

<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.

<button class="btn btn-filled-primary">filled-primary</button>

<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.

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

Global Styles

Use your global stylesheet to update all instances of this element.

.btn {
	@apply font-bold rounded;
}
.btn-icon {
	@apply font-bold;
}
.btn-filled-primary,
.btn-filled-accent,
.btn-filled-warning,
.btn-filled-surface {
	@apply text-white;
}