Button link

A link that looks exactly like a button, for actions that go somewhere.

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

Installation

With the shadcn CLI

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

Manually

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

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

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

Usage

Source codetsx
import { ButtonLink } from "@/components/silicon-ui/button-link/button-link";

API reference

PropTypeDefault
href*string—
children*ReactNode—
variantButtonVariant

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

"primary"
sizeButtonSize

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

"md"
as

The element to render instead of <a>, such as next/link.

ComponentType<AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }>—

Also accepts the props of AnchorHTMLAttributes<HTMLAnchorElement>.

Dependencies

npm
None
Registry
button