Button 按钮

显示一个按钮，或看起来像按钮的组件。

变体

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' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

图标与状态

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

块级与加载文案

block 撑满父容器宽度；loadingText 在加载时替换按钮文字。

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 })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SButton

shadcn-vue 的 Button。

点击使用原生通用事件（直接在 SButton 上使用 .onClick()，与 Vue 的 @click 相同）；在 disabled / loading 状态下，内部的空操作点击手势会吞掉点击（参见 SparkTapBlocker）。

属性	类型	默认值	说明
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	显示加载指示器并禁用按钮。
loadingText	ResourceStr | undefined	undefined	loading 时代替 text 显示的文字。
block	boolean	false	占满父容器的宽度（w-full）。
icon	string | undefined	undefined	前导 lucide 图标名称。
iconRight	string | undefined	undefined	尾部 lucide 图标名称。
label	string | undefined	undefined	无障碍名称；纯图标按钮必须设置。
modifier	AttributeModifier<ButtonAttribute>	new SparkNoopModifier<ButtonAttribute>()	在变体配方之后应用的额外样式（冲突时以此为准）。
tokens	ButtonTokens	{}	实例级令牌覆盖（实例 → 主题 --button-* → 配方），例如 tokens: { radius: 999, background: 'oklch(0.6 0.2 250)' }。参见 ADR D13。
pressFeedback	SparkPressFeedback SparkPressFeedback = 'background' | 'opacity' | 'none'	'background'	按下反馈：'background'（操作类，默认）、'opacity'（选择类条目）、'none'。

插槽: 子组件（尾随闭包）