Button Component Demo

Comprehensive showcase of the Button component variants, sizes, and states

Button Variants

Button Sizes

Loading States

Disabled States

Size & Variant Combinations

Small:
Medium:
Large:

Interactive Examples

Click handlers work normally:

Buttons with custom CSS classes:

AsChild example (renders as link):

Link Button (asChild)

Accessibility Features

Buttons with custom aria-labels:

Test with keyboard navigation (Tab key):

All buttons use the existing CSS classes from globals.css and support full accessibility.