Data-Attribute API

Liquid Glass provides a powerful "Zero-JS" system that allows you to wire up components directly in your HTML using data attributes.

How it Works

When you call LiquidGlass.init(), the library scans the DOM (or a specific sub-tree) for elements with data-liquid-* attributes. It then automatically initializes the appropriate component for each element.

Supported Component Attributes

Add these attributes to your HTML elements to turn them into Liquid Glass components:

• data-liquid-button: Creates a liquid button.
• data-liquid-switch: Creates a toggle switch.
• data-liquid-slider: Creates a horizontal slider.
• data-liquid-glass: Applies the core glass effect to any element.
• data-liquid-cursor: Creates a glass orb cursor.
• data-liquid-input: Creates a glass-wrapped text input.
• data-liquid-dial: Creates a rotary dial.
• data-liquid-progress: Creates a progress bar.

Property Mapping

You can configure component properties using additional data-* attributes. These map directly to the options passed to factory functions:

Example

<button 
  data-liquid-button 
  data-label="Click Me" 
  data-glass-thickness="100"
  data-profile="convexCircle"
></button>

<script>
  // Wires up the button automatically
  LiquidGlass.init();
</script>