Button

A clickable element that triggers an action when pressed.

Usage

Use standalone.

Svelte

<Button {...props}>Label</Button>

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" {...rest} {type} {onclick} aria-disabled conditional aria-description conditional bind:this={element}>
  <span class="left" conditional>{left}</span>
  <span class="main">{children}</span>
  <span class="right" conditional>{right}</span>
</button>

Props

Name	Type	Default	Description
`children*`	`Snippet`	-	Main label; receives the variant as its argument
`left`	`Snippet`	-	Content before the label
`right`	`Snippet`	-	Content after the label
`type`	`<enum>`	`"button"`	The button's `type` attribute
`onclick`	`MouseEventHandler`	-	Click handler; suppressed while `inactive` is set
`form`	`HTMLFormElement`	-	Form validated on click (Details)
`inactive`	`string`	-	Non-empty reason marks `aria-disabled`, suppresses `onclick`, and forces the `inactive` variant (restored when cleared)
`attach`	`Attachment`	-	Svelte attachment on the root button
`element`	`HTMLButtonElement`	-	Bindable root element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Bindable variant

* required. Other HTMLButtonAttributes are passed to <button> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

No automatic switching in normal use, except that setting an inactive reason forces the variant to inactive while it is set and restores the prior variant when cleared.

Default Class Name

svs-button

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Button (whole <button>): aria-disabled="true" and aria-description from the inactive reason when inactive is set.

The managed inactive attributes are component-owned while inactive handling is active; activation is suppressed instead of using the native disabled attribute.

When children is an icon with no text, provide an accessible name by passing aria-label or aria-labelledby through the rest props so the button is not left unlabeled.

Standards Basis

Button is built on a native <button>, so keyboard and assistive-technology support follows the browser standard for buttons. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript

interface ButtonProps extends Omit<HTMLButtonAttributes, "children" | "form" | "type"> {
  children: Snippet<[string]>;
  left?: Snippet<[string, HTMLButtonElement | undefined]>;
  right?: Snippet<[string, HTMLButtonElement | undefined]>;
  type?: "submit" | "reset" | "button";
  onclick?: MouseEventHandler<HTMLButtonElement> | null;
  form?: HTMLFormElement;
  inactive?: string;
  attach?: Attachment<HTMLButtonElement>;
  element?: HTMLButtonElement;
  styling?: SVSClass;
  variant?: SVSVariant;
}
type ButtonReqdProps = "children";
type ButtonBindProps = "element" | "variant";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like