按鈕

按鈕讓使用者透過單次點擊執行動作和做出選擇。

useButton API

import { useButton } from '@mui/base/useButton';
// or
import { useButton } from '@mui/base';

名稱	類型	預設值	描述
disabled（停用）	boolean	false	如果 `true`，則元件會停用。
focusableWhenDisabled（停用時可聚焦）	boolean	false	如果 `true`，允許停用的按鈕接收焦點。
href	string	-
onFocusVisible（焦點可見時觸發）	React.FocusEventHandler	-
rootElementName（根元素名稱）	keyof HTMLElementTagNameMap	''	HTML 元素，例如 'button'、'a' 等
rootRef（根元素 Ref）	React.Ref<Element>	-
tabIndex	NonNullable<React.HTMLAttributes<any>['tabIndex']>	-
to	string	-
type（類型）	React.ButtonHTMLAttributes<HTMLButtonElement>['type']	'button'	當 `component` 為 `button` 時套用的 Type 屬性。

名稱	類型	描述
active（啟用）	boolean	如果 `true`，則元件為啟用狀態（按下）。
focusVisible（焦點可見）	boolean	如果 `true`，則元件正使用鍵盤聚焦。
getRootProps（取得根元素 Props）	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseButtonRootSlotProps<ExternalProps>	根插槽 props 的解析器。
rootRef（根元素 Ref）	React.RefCallback<Element> \| null	元件根 DOM 元素的 ref。
setFocusVisible（設定焦點可見）	React.Dispatch<React.SetStateAction<boolean>>	用於設定 `focusVisible` 參數的回呼函式。