Components
Fancy Button
A compound button component with gradient overlay effects, multiple variants, and sizes.
Installation
bunx @happlyui/cli@latest add fancy-button
Dependencies
npm packages
@radix-ui/react-slot
Registry dependencies
These are automatically installed when you add this component.
tvpolymorphicrecursive-clone-children
Usage
import * as FancyButton from "@/components/ui/fancy-button"
<FancyButton.Root variant="neutral">
<FancyButton.Icon as={ArrowIcon} />
Button
</FancyButton.Root>
Examples
Variants
All four visual variants: neutral (dark + gradient), primary (brand color), error (destructive), and basic (white + stroke).
<FancyButton.Root variant="neutral">Neutral</FancyButton.Root>
<FancyButton.Root variant="primary">Primary</FancyButton.Root>
<FancyButton.Root variant="error">Error</FancyButton.Root>
<FancyButton.Root variant="basic">Basic</FancyButton.Root>
With Icon
Use FancyButton.Icon with the `as` prop for polymorphic icon rendering.
<FancyButton.Root>
<FancyButton.Icon as={RiArrowLeftSLine} />
Button
<FancyButton.Icon as={RiArrowRightSLine} />
</FancyButton.Root>
Sizes
Fancy buttons come in medium (default), small, and xsmall sizes.
<FancyButton.Root size="medium">Button</FancyButton.Root>
<FancyButton.Root size="small">Button</FancyButton.Root>
<FancyButton.Root size="xsmall">Button</FancyButton.Root>
Disabled
Disabled state removes gradient overlays and applies muted styling across all variants.
<FancyButton.Root disabled variant="neutral">Button</FancyButton.Root>
<FancyButton.Root disabled variant="primary">Button</FancyButton.Root>
As Child
Use the asChild prop with Radix Slot to render as a different element, such as a link.
<FancyButton.Root asChild>
<a href="#">Button</a>
</FancyButton.Root>
API Reference
FancyButton.Root
The main fancy button component with gradient overlay effects.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'error' | 'basic' | 'neutral' | The visual style |
size | 'medium' | 'small' | 'xsmall' | 'medium' | The size of the button |
asChild | boolean | false | Renders as child element using Radix Slot |
disabled | boolean | false | Disables the button |
FancyButton.Icon
Polymorphic icon container that receives variant and size from FancyButton.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
as | React.ElementType | 'div' | The element or component to render as |