Button component

The kit:btn component is a central component of Lapikit. It allows you to create buttons that are adaptable, accessible and easily customized, either via props or CSS variables.

It automatically manages variants, states (active, loading, etc.), accessibility, colors, sizes, and integrates with icons or additional content (prepend, append, load).

Examples of button

Variants

Variants control the overall style of the button. They enable adaptation to different interface contexts, while maintaining visual consistency.

filled (default): solid button, generally used for main actions.
outline: button with outline, often used for secondary actions.
text: discreet button with no background or border, perfect for actions in a text flow.
link: styled as a hyperlink, ideal for navigation or less prominent actions.
variant: 'filled' | 'outline' | 'text' | 'link' = 'filled'

size

The size prop adjusts the button’s height and font size. It allows you to create buttons that fit different contexts, from compact icon buttons to large call-to-action buttons.

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'

icon

Add icon to render a square button width equals height. Useful for icon-only actions.

icon: boolean = false

prepend and append snippets

Use prepend and append to place icons or elements on either side of the label.

prepend: Snippet | undefined = undefined
append: Snippet | undefined = undefined

States

The kit:btn component can reflect several visual or functional states, useful for informing the user or managing interaction. These states can be combined in certain cases (e.g. loading + success), but some, such as disabled, take precedence over all.

Here are the main states available:

disabled: boolean = false
loading: boolean = false
active: boolean = false

Each state can be styled automatically via Lapikit themes or customized via CSS classes or variables.

Use the load snippet to replace the default ... spinner with custom content.

load: Snippet | undefined = undefined

block and wide

block makes the button stretch to its container’s full width. wide caps it at 16rem and is intended to be centered.

block: boolean = false
wide: boolean = false

As a link

Pass href to render the button as an <a> element. The disabled prop removes href automatically.

href: string | undefined = undefined

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

API Reference

kit:btn

props	type	description	default
is	enum	HTML element to render. Overridden by `href` or `input`.	`'button'`
variant	enum	Visual style.	`'filled'`
size	enum	Height and font size.	`'md'`
density	enum	Padding and height multiplier.	`'default'`
rounded	enum	Border radius.
href	`string`	Renders as `<a>`. Cleared when `disabled`.
disabled	`boolean`	Prevents interaction, dims the button.	`false`
loading	`boolean`	Shows a spinner, hides content.
active	`boolean`	Applies the pressed background.	`false`
icon	`boolean`	Makes width equal height for icon-only buttons.
block	`boolean`	Stretches to full container width.
wide	`boolean`	Caps width at `16rem`.
noRipple	`boolean`	Disables the ripple animation on click.
prepend	`Snippet`	Content before the label.
append	`Snippet`	Content after the label.
load	`Snippet`	Custom spinner content shown while loading.
children	`Snippet`	Button label.

kit:btn become more effective with Tooltips, a Toolbar or Popover interactions.