Button

A customizable button component with multiple variants, sizes, and states.

Installation

npxshadcn@latest add @pagekit/button

Usage

Default

The default button style with primary colors.

Variants

The button component comes with multiple style variants to suit different use cases.

Available Variants

default - Primary button with brand colors and shadow
destructive - Red/danger button for destructive actions
outline - Bordered button with transparent background
secondary - Alternative style with secondary colors
ghost - Minimal button that shows background on hover
link - Styled as an underlined link

Sizes

Three different size options are available.

Size Specifications

sm - Small button (height: 32px)
default - Standard button (height: 36px)
lg - Large button (height: 40px)
icon - Square button for icons only (36x36px)

With Icons

Buttons can include icons alongside text. Icons are automatically sized and positioned.

Icon Only

Use the icon size variant for buttons that only contain an icon.

Disabled State

Buttons can be disabled to prevent user interaction.

As Child (Polymorphic)

Use the asChild prop to render the button as a different element (like a Link) while maintaining button styles.

Documentation GitHub

API Reference

Props

Prop	Type	Default	Required	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	No	The visual style variant
size	"default" \| "sm" \| "lg" \| "icon"	"default"	No	The size of the button
asChild	boolean	false	No	Render as a child element (polymorphic)
disabled	boolean	false	No	Whether the button is disabled
className	string	-	No	Additional CSS classes

Button Variants Utility

The buttonVariants utility is also exported for use with other components:

import { buttonVariants } from "@/registry/ui/button";
import Link from "next/link";

export default function CustomLink() {
return (
  <Link 
    href="/docs" 
    className={buttonVariants({ variant: "outline", size: "lg" })}
  >
    Go to Docs
  </Link>
);
}

Features

✅ Multiple style variants (default, destructive, outline, secondary, ghost, link)
✅ Three size options (sm, default, lg) plus icon-only variant
✅ Icon support with automatic sizing
✅ Disabled state handling
✅ Dark mode compatible
✅ Full accessibility support
✅ Polymorphic (can render as different elements)
✅ Keyboard navigation and focus states
✅ TypeScript support
✅ Customizable with className prop

Accessibility

The button component follows accessibility best practices:

Proper focus indicators with visible ring
Disabled state prevents interaction and shows reduced opacity
Support for aria-invalid for form validation
Semantic button element by default
Keyboard navigation support (Enter/Space)

Customization

You can customize the button by passing a className prop or by modifying the buttonVariants configuration in the component file.

Go to Docs