Button

A versatile button component with multiple variants, sizes and dark mode support

Installation

Install the Button component using the nocta-ui CLI:

Terminal

npx nocta-ui add button

Then import the component:

Import

import { Button } from '@/components/ui/button';

Basic Usage

Primary Button

Secondary Button

Ghost Button

Variants

The Button component supports three variants: primary, secondary, and ghost.

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Action Button Group

Button States

Disabled State

Customization

Custom Styling

The Button component accepts a className prop for custom styling:

Custom Styling

<Button className="w-full shadow-lg">
  Full Width Button
</Button>

<Button className="rounded-full px-8">
  Rounded Button
</Button>

<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
  Gradient Button
</Button>

With Icons

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Button content
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'primary'`	Button style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`className`	`string`	`''`	Additional CSS classes
`disabled`	`boolean`	`false`	Disable the button
`onClick`	`() => void`	—	Click handler

The Button component also accepts all standard HTML button attributes.

On this page