Button

A clear, responsive action with quiet secondary states.

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

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/button

Manually

  1. Install the dependencies.

    npm install motion

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

    • components/silicon-ui/button/button.tsx
    • components/silicon-ui/button/button.module.css

  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 { Button } from "@/components/silicon-ui/button/button";

API reference

PropTypeDefault
variantButtonVariant

"primary""secondary""ghost""danger"

"primary"
sizeButtonSize

"xs""sm""md""lg"

"md"
loadingbooleanfalse

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

Dependencies

npm
motion
Registry
silicon-motion-tokens