UI Elements

Button

A clickable element that triggers an action when pressed.

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<button class="whole" {type} {onclick} {...attributes} bind:this={element} use:action>
  <span class="left" conditional>{left}</span>
  <span class="main">{children}</span>
  <span class="right" conditional>{right}</span>
</button>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface ButtonProps {
  children: Snippet<[string]>; // Snippet<[variant]>
  left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,element]>
  right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,element]>
  type?: "submit" | "reset" | "button"; // ("button")
  onclick?: MouseEventHandler<HTMLButtonElement> | null;
  form?: HTMLFormElement; // bindable
  attributes?: HTMLButtonAttributes;
  action?: Action;
  element?: HTMLButtonElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • form - The form element to validate when the button is clicked (Details)

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-button

Exports

Types

TypeScript
type ButtonReqdProps = "children";
type ButtonBindProps = "form" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo
Enter variant as you like