# LiquidButton

> The primary action control: WebGL rim light, jelly press spring and a loading state.

Import: `import { LiquidButton } from '@liquefy-ui/react'`
Kind: ui
Docs: https://liquefy-ui.com/#/components/button
Copy the source: `npx shadcn@latest add @liquefy-ui/liquid-button`

## Types

Verbatim from source.

```ts
export type LiquidButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {
  children: ReactNode
  iconAfter?: ReactNode
  iconBefore?: ReactNode
  isLoading?: boolean
  lens?: boolean
  size?: 'sm' | 'md' | 'lg'
  tint?: string
  webgl?: boolean
}
```

## Rules

- Every component is a client component. The npm bundles carry a `'use client'`
  banner and so does every file in the registry, so importing from a Next.js
  server component is fine. Only your own handlers need a directive of their own.
- `LiquefyProvider` is required. Components read tint, spacing, motion and WebGL
  settings from it. A nested provider does **not** inherit from the one above it:
  unset props fall back to the library defaults, so name what you want to keep.
- There is no `variant="primary"` on `LiquidButton`. Buttons vary by `size`,
  `tint`, `isLoading`, `lens` and `webgl`. `variant` exists on `LiquidSurface`
  (`'clear' | 'tinted'`) and `LiquidChip`.
- Every component accepts a `styles` prop: CSS properties plus the `p`/`px`/`mt`/
  `w`/`h`/`size`/`bg`/`radius` shorthands on the `--lq-space` scale, `$token`
  references, responsive objects like `{ base: 1, md: 3 }`, and state keys such as
  `_hover`, `_focusVisible`, `_disabled`, `_dark`. There is no `styled()` and no
  `sx` prop.
- Everything is imported from the package root. There are no deep entry points,
  and names not listed below — `compileLiquidStyles`, `useLiquefyPortalContainer`,
  the internal glyphs — are not exported from it.
- Overlays (Dialog, Drawer, Menu, Select, Tooltip) are built on Base UI and render
  into a portal inside the provider. Focus handling, Escape and collision-aware
  placement are already done; do not re-implement them.
- Accordion headers are in the normal tab order rather than a roving composite,
  which is what WAI-ARIA specifies. Arrow keys do not move between them.
- The library does not read `prefers-reduced-motion` or
  `prefers-reduced-transparency` itself. Map them to the `motion` and
  `transparency` props if the product wants that.