Button

Overview

The Button component provides a styled, accessible button with support for multiple visual variants and sizes. Built with class-variance-authority (CVA) for type-safe variant handling.

Import

import { Button } from "@aurelienbbn/gadget-ui/components";

Basic Usage

<Button>Click me</Button>

Variants

The Button component supports three visual variants:

Primary
Secondary
Ghost

<Button variant="primary">
  Primary Button
</Button>

Features a purple gradient background with accent shadows. This is the default variant.

<Button variant="secondary">
  Secondary Button
</Button>

Displays a raised surface background with subtle border styling.

<Button variant="ghost">
  Ghost Button
</Button>

Transparent background that shows surface color on hover.

Sizes

Three size options are available:

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

sm - Height: 28px (7), Padding: 12px (3), Font: 12px (xs)
md - Height: 32px (8), Padding: 16px (4), Font: 14px (sm) - Default
lg - Height: 36px (9), Padding: 20px (5), Font: 14px (sm)

Props

'primary' | 'secondary' | 'ghost'

default:"primary"

The visual style variant of the button.

'sm' | 'md' | 'lg'

default:"md"

The size of the button.

string

Additional CSS classes to apply.

boolean

Disables the button and reduces opacity to 50%.

The Button component extends ButtonHTMLAttributes<HTMLButtonElement>, so all standard button attributes are supported (onClick, type, disabled, etc.).

Accessibility Features

Focus visible outline with 2px accent color and offset
Disabled state prevents pointer events
Semantic <button> element
Proper ARIA attributes inherited from native button

Examples

Disabled State

<Button disabled>Disabled Button</Button>

With Icon and Text

<Button>
  <Icon name="plus" />
  Add Item
</Button>

The button uses gap-1.5 to automatically space child elements.

Custom Styling

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

Component Definition

Location: packages/gadget-ui/src/components/button.tsx:55 The Button uses forwardRef to support ref forwarding to the underlying button element.

Components

Utilities

Overview

Import

Basic Usage

Variants

Sizes

Props

Accessibility Features

Examples

Disabled State

With Icon and Text

Custom Styling

Component Definition

​Overview

​Import

​Basic Usage

​Variants

​Sizes

​Props

​Accessibility Features

​Examples

​Disabled State

​With Icon and Text

​Custom Styling

​Component Definition

Overview

Import

Basic Usage

Variants

Sizes

Props

Accessibility Features

Examples

Disabled State

With Icon and Text

Custom Styling

Component Definition