Tailwind

Buttons

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

Source Page Source

Demo

Use .btn to add basic button styles to any anchor or button element. Replace with .btn-icon for an icon button. Mix buttons with any arbitrary background color or variant style classes, such as .variant-[style]-[themeColor].

Sizes

A number of canned size presets are available via .btn-[size]. Default sizing matches btn-md.


Button Groups

Groups related anchors or buttons. Pairs with any variant style. Horizontal and vertical options are provided.

Button groups with different styles

SvelteKit Link Options

While using native anchor elements, you can take advantage of SvelteKit's Link Options such as a prefetch.

html
<a href="/" class="btn variant-filled" data-sveltekit-preload-data="hover">Button</a>