Button component

Button

The Button 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

Responsive

The component adapts to different screen sizes thanks to Lapikit’s built-in media queries. It can be used with responsive sizes via the size prop, by passing a Record<string, string> object.

State

The Button 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:

• active: indicates that a button is selected or in use.
• loading: displays a spinner and deactivates the button to avoid multiple actions.
• disabled: makes the button inactive, with no interaction possible.
• error, info, warning, success: contextual states to reflect a specific situation or visual feedback (error, warning, validation…).

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

Variant

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.

Colors

For fine-tuned customization, you can switch colors manually:

• color: change the color of the text or icon.
• background: change the background color of the button.

If you don’t pass anything, Lapikit’s default theme manages colors according to states (success, error, etc.) or variants.

Density

Density controls the button’s internal padding, i.e. its compactness:

• default: standard size, suitable for most applications.
• comfortable: slightly reduced padding for denser interfaces.
• compact: minimal, ideal for toolbars or busy lists.

Useful for adapting your components to the density of your UI.

Events

The component propagates native HTML events, such as click, and can be manipulated via a ref (with $bind:ref).

• You can listen to it normally: on:click={handleClick}
• And manipulate it if necessary via a DOM reference (bind:ref={btn}). If the button is rendered as <a> (is="a"), the behavior remains consistent with HTML tags.

Type

To adapt to different uses, the button can be rendered as:

• a classic <button> (is="button", default)
• a <a> link (is="a", necessity href)

Prop type applies only if is="button":

• button (default): neutral button
• submit : submits a form
• reset : resets a form

Icon

When icon is set to true, the button adopts a specific style to accommodate an icon only (centered, square, no side padding). Perfect for compact action buttons or toolbars.

Snippet

These props are used to add content around the button’s main text:

• prepend: element before the text (often an icon)
• append: element after the text
• load: content displayed instead of text when loading is activated

Very useful for visually enriching a button without creating a custom structure by hand.

Ripple

By default, the button displays a Material Design Style ripple when clicked. You can disable this effect with the noRipple prop. This can be useful in sober interfaces or when you want to avoid animation for performance or design reasons.

API Reference

Variables CSS

Buttons become more effective with Tooltips, a Toolbar or Popover interactions.