按鈕

按鈕允許使用者透過單次點擊執行動作和選擇。

安裝

以上指令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

導入

NextUI 匯出 2 個與按鈕相關的元件

• Button：顯示按鈕的主要元件。
• ButtonGroup：顯示按鈕群組的包裝元件。

用法

已停用

尺寸

圓角

顏色

變體

載入中

傳遞 isLoading 屬性來在按鈕內顯示 Spinner 元件。

您也可以透過傳遞自訂元件給 spinner 屬性來自訂載入指示器。

使用圖示

您可以透過傳遞 startContent 或 endContent 屬性來為 Button 加入圖示。

僅圖示

您也可以透過傳遞 isIconOnly 屬性以及將所需的圖示作為 children 來顯示不帶文字的按鈕。

自訂樣式

您可以透過傳遞自訂的 Tailwind CSS 類別到元件的插槽來自訂 Button 元件。

由於 Tailwind Merge 函式庫，自訂類別名稱將會覆寫預設的類別名稱。這表示您不需要擔心類別衝突的問題。

自訂實作

您也可以使用 useButton hook 來建立您自己的按鈕元件。

按鈕群組

群組停用

ButtonGroup 元件也接受 isDisabled 屬性來停用裡面的所有按鈕。

群組使用案例

ButtonGroup 元件的一個常見使用案例是顯示一組兩個按鈕，一個用於選定的值，另一個用於 dropdown。

請參閱 Dropdown 元件以取得更多詳細資訊。

資料屬性

Button 在 base 元素上有以下屬性

• data-hover：當按鈕被滑鼠懸停時。基於 useHover
• data-focus：當按鈕被聚焦時。基於 useFocusRing。
• data-focus-visible：當按鈕使用鍵盤聚焦時。基於 useFocusRing。
• data-disabled：當按鈕被禁用時。基於 isDisabled 屬性。
• data-pressed：當按鈕被按下時。基於 usePress
• data-loading：當按鈕正在載入時。基於 isLoading 屬性。

無障礙性

• 按鈕具有 button 的角色。
• 支援 空白鍵 和 Enter 鍵 的鍵盤事件。
• 滑鼠和觸控事件處理，以及按壓狀態管理。
• 鍵盤焦點管理和跨瀏覽器正規化。

我們建議閱讀這篇關於建構在各種裝置和互動方式上都能良好運作的按鈕的複雜性的部落格文章。

API

按鈕屬性

按鈕事件

按鈕群組屬性