Foundations
IntroductionButton
Used to trigger an action, such as opening a dialog or submitting a form.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/button.jsonSizes
The default size is medium.
Variants
The default variant is prominent.
Prefix and suffix
Buttons can have prefix and suffix icons.
Best practices
The best practices when using buttons.
- Choose clear, verb-first text (e.g., "Save Changes" or "Delete Project") rather than vague labels like "Submit" or "OK".
- Use only one Prominent button per view to draw focus to the primary action. Use Secondary, Bordered, or Translucent variants for fallback choices, and Ghost for other tools.
- Only use the Destructive variant for dangerous actions. Consider pairing it with a confirmation prompt or
Dialog to prevent accidental data loss. - Set the
disabledproperty to prevent user interaction during loading or when required fields are missing, maintaining a predictable UI.
Props
The props available for the Button component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "prominent" | "bordered" | "secondary" | "translucent" | "ghost" | "destructive" | "prominent" | The visual style variant of the button. |
| size | "xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | The size variation of the button (including icon-only shapes). |
| href | string | undefined | If provided, renders the button as an anchor tag `<a>`. |
| magnetic | boolean | true | Enables the physics-based elastic magnetic pulling effect towards the cursor. |
| scale | boolean | true | Enables tactile spring scaling response when pressed. |
| specular | boolean | true | Enables dynamic 3D specular highlight reflections that track cursor movement. |
| specularAngle | number | undefined | Optional fixed angle for the specular light reflection. |
| liquidGlass | boolean | false | Enables physical liquid glass refraction distortion (Chromium only). |
| refractiveIndex | number | 2.4 | Index of refraction (IOR) for the glass surface curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 20 | Depth of the glass bezel refraction boundary zone (px). |
| displacementScale | number | 40 | Strength of the physical refraction displacement offset. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | 3D bezel outline profile contour style. |
| chromaticAberration | boolean | false | Enables realistic RGB channel prism splitting refraction at bezel edges. |
| saturationBoost | number | 1.3 | Color saturation boost multiplier inside refracted zone. |
| backgroundBlur | number | 0.3 | Pre-blur factor applied to background to hide SVG rendering artifacts. |