操作按钮`LoadingButton`

在正常、加载与禁用之间切换，加载时保留按钮宽度，减少布局跳动。

亲手试一试。

01 / LIVE PREVIEW

STATES / 示例状态

默认加载禁用

在左侧预览中体验这枚组件。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

let mut saved = use_signal(|| false);
rsx! {
    LoadingButton {
        label: if saved() { "已保存" } else { "保存设置" },
        loading: false,
        onclick: move |_| saved.set(true),
    }
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`label`String	必填	按钮正常状态的文案。
`loading`bool	必填	显示加载指示并阻止重复操作。
`disabled`bool	false	设置禁用状态。
`variant`&'static str	primary	primary 或 sm。
`onclick`EventHandler<()>	必填	点击回调。

操作方式

04 / INTERACTION

Tab聚焦按钮Space / Enter执行操作

YGGDRASIL · 每一个细节，都有回应。src/components/ui.rs