Button 按鈕

靈活的操作觸發元件，支援多種視覺樣式、尺寸與玻璃效果。

Demo

Glass 變體

尺寸

深色背景

禁用狀態

使用方式

<script setup lang="ts">
import { LiquidButton } from '@liquid/ui'
</script>

<template>
  <LiquidButton variant="primary" size="md" @click="handleClick">
    Click Me
  </LiquidButton>
</template>

Props

Prop	型別	預設值	說明
variant	'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'glass' | 'glass-css-only' | 'glass-highlight-only' | 'glass-layered' | 'glass-highlight-layered'	'primary'	視覺樣式變體
size	'sm' | 'md' | 'lg'	'md'	按鈕尺寸
disabled	boolean	false	禁用按鈕
type	'button' | 'submit' | 'reset'	'button'	HTML button type 屬性

Events

事件	Payload	說明
click	MouseEvent	按鈕點擊時觸發（禁用狀態下不觸發）

注意事項

• Glass 變體（glass、glass-layered、glass-highlight-layered）需要在應用根部放置 GlassFilterProvider。
• glass-css-only 與 glass-highlight-only 無需 GlassFilterProvider 即可使用。
• 為獲得最佳玻璃效果，請確保按鈕後方有彩色或紋理背景。