Button - HapplyUI

A compound button component with variants, modes, sizes, and icon support.

Installation

bunx @happlyui/cli@latest add button

Dependencies

npm packages

@radix-ui/react-slot
tailwind-variants

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as Button from "@/components/ui/button"

<Button.Root variant="primary" mode="filled">
  Click me
</Button.Root>

Examples

Primary Variant

The primary variant uses the brand color for main call-to-action buttons.

<Button.Root variant="primary" mode="filled">Filled</Button.Root>
<Button.Root variant="primary" mode="stroke">Stroke</Button.Root>
<Button.Root variant="primary" mode="lighter">Lighter</Button.Root>
<Button.Root variant="primary" mode="ghost">Ghost</Button.Root>

Neutral Variant

The neutral variant uses grayscale colors for secondary actions.

<Button.Root variant="neutral" mode="filled">Filled</Button.Root>
<Button.Root variant="neutral" mode="stroke">Stroke</Button.Root>
<Button.Root variant="neutral" mode="lighter">Lighter</Button.Root>
<Button.Root variant="neutral" mode="ghost">Ghost</Button.Root>

Error Variant

The error variant for destructive actions.

<Button.Root variant="error" mode="filled">Filled</Button.Root>
<Button.Root variant="error" mode="stroke">Stroke</Button.Root>
<Button.Root variant="error" mode="lighter">Lighter</Button.Root>
<Button.Root variant="error" mode="ghost">Ghost</Button.Root>

Sizes

Buttons come in multiple sizes.

<Button.Root size="medium">Medium</Button.Root>
<Button.Root size="small">Small</Button.Root>
<Button.Root size="xsmall">XSmall</Button.Root>
<Button.Root size="xxsmall">XXSmall</Button.Root>

With Icons

Use Button.Icon to add icons to your button.

<Button.Root variant="primary" mode="filled">
  <Button.Icon as={MailIcon} />
  Send Email
</Button.Root>

Icon Only

Set iconOnly to create square icon-only buttons.

<Button.Root variant="primary" mode="filled" iconOnly>
  <Button.Icon as={PlusIcon} />
</Button.Root>

API Reference

Button.Root

The main button container component.

Prop	Type	Default	Description
`variant`	`'primary' \| 'neutral' \| 'error'`	`'primary'`	The color variant
`mode`	`'filled' \| 'stroke' \| 'lighter' \| 'ghost'`	`'filled'`	The visual style
`size`	`'medium' \| 'small' \| 'xsmall' \| 'xxsmall'`	`'medium'`	The size of the button
`iconOnly`	`boolean`	`false`	Makes the button square for icon-only use
`asChild`	`boolean`	`false`	Renders as child element instead of button
`disabled`	`boolean`	`false`	Disables the button

Button.Icon

A wrapper for icons inside buttons.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render
`className`	`string`	-	Additional CSS classes