Button
The Button component implements iOS-style states with support for custom elastic physics, 3D specular light reflections, and tactile spring scaling.
Preview
Configuration
Magnetic Physics Pulls button towards cursor elastic-wise
Haptic Elastic Scale Squeezes on holding and click actions
Specular Highlight Simulates light reflection angles
Disabled State Freezes interaction handlers
Installation
npx shadcn-svelte@latest add https://ui.grgurevic.click/r/button.jsonSvelte Composition Code
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button>
Interactive Button
</Button>API & Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "prominent" | "bordered" | "secondary" | "translucent" | "ghost" | "destructive" | "prominent" | Visual configuration style. |
| size | "xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Sizing dimensions. |
| magnetic | boolean | true | Enables cursor gravity elastic pulling. |
| scale | boolean | true | Enables 3D elastic spring compression on clicks. |
| specular | boolean | true | Enables dynamic light highlight reflection overlay. |
| href | string | undefined | Optional URL path. If provided, renders an anchor link styled like a button. |