Button

Displays a button or a component that looks like a button.

Variants

SButton({ text: 'Default' })
SButton({ text: 'Secondary', variant: 'secondary' })
SButton({ text: 'Destructive', variant: 'destructive' })
SButton({ text: 'Outline', variant: 'outline' })
SButton({ text: 'Ghost', variant: 'ghost' })
SButton({ text: 'Link', variant: 'link' })

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes

SButton({ text: 'Small', sizing: 'sm' })
SButton({ text: 'Default' })
SButton({ text: 'Large', sizing: 'lg' })
SButton({ variant: 'outline', sizing: 'icon', icon: 'plus', label: 'Add' })

Approximate web preview — the HarmonyOS rendering is the reference.

Icons & states

SButton({ text: 'Login with Email', icon: 'mail' })
SButton({ text: 'Next', variant: 'secondary', iconRight: 'arrow-right' })
SButton({ text: 'Please wait', loading: true })
SButton({ text: 'Disabled', disabled: true })
  .onClick(() => this.save())   // never fires while disabled

Approximate web preview — the HarmonyOS rendering is the reference.

Block & loading text

block stretches to the parent width; loadingText replaces the label while loading.

SButton({ text: 'Continue', block: true })
SButton({ text: 'Sign in with Google', variant: 'outline', icon: 'globe', block: true })
SButton({ text: 'Save changes', loading: this.saving, loadingText: 'Saving…', block: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SButton

shadcn-vue Button.

Clicks use the native universal event (.onClick() on SButton itself, like Vue's @click); while disabled / loading an inner no-op tap gesture swallows the tap (see SparkTapBlocker).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
variant	ButtonVariant ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'	'default'
sizing	ButtonSize ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'	'default'
disabled	boolean	false
loading	boolean	false	Shows a spinner and disables the button.
loadingText	ResourceStr | undefined	undefined	Text shown instead of text while loading.
block	boolean	false	Full width of the parent (w-full).
icon	string | undefined	undefined	Leading lucide icon name.
iconRight	string | undefined	undefined	Trailing lucide icon name.
label	string | undefined	undefined	Accessible name; required for icon-only buttons.
modifier	AttributeModifier<ButtonAttribute>	new SparkNoopModifier<ButtonAttribute>()	Extra styles applied after the variant recipe (wins on conflicts).
tokens	ButtonTokens	{}	Per-instance token overrides (instance → theme --button-* → recipe), e.g. tokens: { radius: 999, background: 'oklch(0.6 0.2 250)' }. See ADR D13.
pressFeedback	SparkPressFeedback SparkPressFeedback = 'background' | 'opacity' | 'none'	'background'	Press feedback: 'background' (actions, default), 'opacity' (selection items), 'none'.

Slots: children (trailing closure)