Button

A flexible action trigger with multiple visual variants, sizes, and glass effects.

Demo

Glass Variants

Sizes

On Dark Background

Disabled State

Usage

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

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

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'glass' | 'glass-css-only' | 'glass-highlight-only' | 'glass-layered' | 'glass-highlight-layered'	'primary'	Visual style variant
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disables the button
type	'button' | 'submit' | 'reset'	'button'	HTML button type attribute

Events

Event	Payload	Description
click	MouseEvent	Emitted on button click (only when not disabled)

Notes

• Glass variants (glass, glass-layered, glass-highlight-layered) require GlassFilterProvider at the app root.
• glass-css-only and glass-highlight-only work without GlassFilterProvider.
• For best glass appearance, ensure there is a colorful or textured background behind the button.