按钮

Button操作与导航

陶土底的主按钮一屏只放一个；次要、描边与透明按钮承担其余操作，红色只留给删除。按下时缩到 0.98 并以弹簧回弹；加载时文字隐去、转圈居中，按钮宽度不变。

属性

名称	类型	默认值	说明
`variant`	`Signal<ButtonVariant>`	`Primary`	Primary / Secondary / Ghost / Outline / Danger / DangerSoft。
`size`	`ButtonSize`	`Md`	Xs 26px、Sm 30px、Md 34px、Lg 40px。
`icon`	`MaybeProp<IconName>`	`None`	文字前的图标。
`loading`	`Signal<bool>`	`false`	加载中：不响应点击，标 aria-busy。
`disabled`	`Signal<bool>`	`false`	禁用。
`type`	`&'static str`	`"button"`	表单内提交时传 "submit"。
`class`	`Signal<String>`	`空`	附加类名。
`onclick`	`Option<Callback<MouseEvent>>`	`None`	点击回调。

键盘

Enter / Space: 触发按钮。

用法

src/components/ui/controls.rs

let deleting = RwSignal::new(false);

view! {
    <Button onclick=move |_| publish()>"\u53D1\u5E03\u6587\u7AE0"</Button>
    <Button variant=ButtonVariant::Secondary icon=IconName::Save>"\u4FDD\u5B58\u8349\u7A3F"</Button>
    <Button variant=ButtonVariant::Danger loading=deleting>"\u6C38\u4E45\u5220\u9664"</Button>
}

预览

属性

键盘

用法