Button
Actions in default, secondary, and outline variants.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Button
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/button.json'Usage
A complete example using the installed component and hook paths.
Button usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Button } from "@/components/ui/button";function ButtonPreview({ interactive }: PreviewProps) { const [last, setLast] = useState(""); return ( <div className="space-y-3"> <div className="flex flex-wrap gap-2"> <Button onClick={() => interactive && setLast("Primary")}>Primary</Button> <Button variant="secondary" onClick={() => interactive && setLast("Secondary")}> Secondary </Button> <Button variant="outline" onClick={() => interactive && setLast("Outline")}> Outline </Button> </div> {interactive && ( <output className="block text-xs text-muted-foreground"> {last ? `${last} button selected` : "Select a button to see feedback"} </output> )} </div> );}export default function Demo() { return <ButtonPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Button
Button props
ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & { sound?: boolean }- variant
- "default"
- size
- "default"
- sound
- true
buttonVariants
Exported value.
SoundButton
SoundButton props
ButtonPrimitive.Props & { sound: boolean }