Components
Button
Liquid, holo, glow or plain — every button can be magnetic and ripples on press. The liquid body flows toward the pointer.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Button } from '@vizzele/react';
<Button variant="liquid" size="lg" magnetic>Get started</Button>
<Button variant="holo" endIcon={<Arrow />}>Docs</Button>
<Button variant="glow" loading>Deploying</Button>
<Button as="a" href="/pricing" variant="ghost">Pricing</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'liquid' | 'holo' | 'glow' | 'ghost' | 'default' | Material. |
size | 'sm' | 'md' | 'lg' | 'md' | Height and type size. |
magnetic | boolean | MagneticOptions | false | Pull toward the pointer. |
ripple | boolean | true | Liquid ripple on press. |
loading | boolean | false | Spinner + aria-busy, disabled while loading. |
startIcon / endIcon | ReactNode | — | Icons. |
as | ElementType | 'button' | Render as a link or router Link. |
Accessibility
- Real <button> (type="button" by default) with a visible iridescent focus ring.
- Loading sets aria-busy and blocks double submits.
- Text on the liquid variant is dark ink over bright color for AA contrast.