Source

Command Palette

Search for a command to run...

Button

Clickable element with customizable styles and features.

About Button

Interactive button component with multiple visual variants including filled, outlined, and rounded styles. Supports loading states, disabled states, and flexible composition using Radix Slot.

Installation

Import the Button component from LSD:
import { Button } from '@nipsys/lsd'

export default function MyComponent() {
  return <Button />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Destructive

Destructive Rounded

Filled

Filled Rounded

Ghost

Ghost Rounded

Link

Outlined

Outlined Rounded

Success

Success Rounded

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
As Child

Disabled

Full Width

Icons

Loading

API Reference

Button

variant
Visual style including background, border, and corner radius.
Type: "filled" | "outlined" | "filled-rounded" | "outlined-rounded" | "link" | "ghost" | "ghost-rounded" | "destructive" | "destructive-rounded" | "success" | "success-rounded"
size
Dimensions including height and padding.
Type: "sm" | "md" | "lg" | "square-sm" | "square-md" | "square-lg"
asChild
Merges props onto immediate child for composition.
Type: boolean
loading
Shows spinner and disables during async operations.
Type: boolean
fullWidth
Expands to fill container width.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the button• Enter or Space - Activate the button• Shift + Tab - Navigate to previous element
ARIA Attributes
Proper ARIA attributes for screen readers
• disabled attribute managed for non-interactive states• aria-busy set to true during loading state• Proper role preservation with asChild composition
Focus States
Visible focus indicators for keyboard users
• Visible focus indicators follow the LSD design system. Focus is correctly managed when disabled or loading with proper focus restoration.
Button-group