Action button

A compact button for frequent toolbar actions.

npx shadcn@latest add @silicon-ui/action-button
actiontoolbar
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/action-button

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/action-button/action-button.tsx
    • components/silicon-ui/action-button/action-button.module.css
    • components/silicon-ui/text-morph/text-morph.tsx shared
    • components/silicon-ui/text-morph/text-morph.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ActionButton } from "@/components/silicon-ui/action-button/action-button";

API reference

PropTypeDefault
label*string—
onAction*() => void | Promise<void>—
successLabelstring"Saved"
pendingLabelstring"Saving"
resetAfterMsnumber2400
onActionError(error: unknown) => void—

Also accepts the props of ButtonHTMLAttributes<HTMLButtonElement>, except onClick, onDrag, onDragEnd, onDragStart, onAnimationStart.

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokenstext-morph