Button
Tactile buttons with loading state, keyboard hints and six variants.
Buttons trigger actions. Cuelark buttons have a pressed state you can feel (an inset highlight and a one-pixel travel), a loading state that keeps the button's width, and a built-in keyboard shortcut hint, so the shortcut is learned where the action lives.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/button.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/button.
Builds on: motion
Usage
import { Button } from "@/components/ui/button";
<Button kbd="⌘S" loading={saving}>Save</Button>Examples
Sizes, loading and shortcuts
Keyboard hints, the loading state, icon buttons and every size.
Motion
Pressing sends a thin ring rippling out from the pointer (from the center for keyboard presses). Turn it off per button with ping={false}.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Button
Extends the native <button> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "primary" | Visual style. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | "md" | Height follows --cl-density. |
| loading | boolean | false | Spinner, aria-busy, disabled; width is preserved. |
| kbd | ReactNode | — | Keyboard shortcut hint shown after the label. |
| ping | boolean | true (false for link) | Ripple ring on press (GSAP, follows --cl-motion). |
| asChild | boolean | false | Render the child element with button styles. |
Accessibility
- Native <button> semantics; icon-only buttons need an aria-label.
- Loading sets aria-busy and disables the button so double submits cannot happen.
- Focus is shown with a 2px outline offset from the button, visible on every variant.
FAQ
Also searched as: react button · shadcn button · loading button · button with keyboard shortcut · tailwind button