Skip to content
Docs

Button

@hua-labs/hua
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Button } from "@hua-labs/hua";

variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" | "neon" | "glass""default"The visual style of the button
size"sm" | "md" | "lg" | "xl" | "icon""md"The size of the button
hover"springy" | "scale" | "glow" | "slide" | "none""springy"Hover animation effect. 'springy' is the HUA UI signature
rounded"sm" | "md" | "lg" | "full""md"Border radius size
shadow"none" | "sm" | "md" | "lg" | "xl""md"Shadow depth
loadingbooleanfalseShows loading spinner and disables button
disabledbooleanfalseDisables the button
iconReact.ReactNode-Icon element to display
iconPosition"left" | "right""left"Position of the icon relative to text
iconOnlybooleanfalseRenders icon only (requires aria-label)
fullWidthbooleanfalseMakes button full width
gradient"blue" | "purple" | "green" | "orange" | "pink" | "custom""blue"Gradient color (when variant='gradient')
customGradientstring-Custom Tailwind gradient classes
hrefstring-Renders as anchor tag when provided
asChildbooleanfalseMerge props with child element (Slot pattern)

Code Examples

docs:common.basicUsagetsx
import { Button } from '@hua-labs/hua';

<Button>Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
docs:common.withIconstsx
<Button icon={<DownloadSimple />}>Download</Button>
<Button icon={<PaperPlaneTilt />} iconPosition="right">Send</Button>
docs:common.statestsx
<Button loading>Saving...</Button>
docs:common.gradienttsx
<Button variant="gradient" gradient="purple">Get Started</Button>

  • •Keyboard: Fully navigable with Tab and activatable with Enter/Space
  • •aria-disabled: Applied when disabled or loading
  • •aria-busy: Applied during loading state
  • •Reduced Motion: Respects prefers-reduced-motion setting
  • •Icon Only: Requires aria-label when using iconOnly
Action