Button
A versatile button component with multiple variants, sizes and dark mode support
Installation
Install the Button component using the nocta-ui CLI:
npx nocta-ui add buttonThen import the component:
import { Button } from '@/components/ui/button';Examples
Primary Button
Secondary Button
Ghost Button
Icon Button
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Api Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Button content |
variant | 'primary' | 'secondary' | 'ghost' | 'icon' | 'primary' | Button style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
className | string | '' | Additional CSS classes |
disabled | boolean | false | Disable the button |
type | 'button' | 'submit' | 'reset' | 'button' | Button type (defaults to button to avoid accidental form submit) |
aria-label | string | — | Accessible name for icon-only buttons |
onClick | () => void | — | Click handler |
The Button component also accepts all standard HTML button attributes. When disabled is set, the component also exposes aria-disabled for assistive technologies.