Compact Button - HapplyUI

A small icon-only button component with variants, sizes, and optional full-radius.

Installation

bunx @happlyui/cli@latest add compact-button

Dependencies

npm packages

@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as CompactButton from "@/components/ui/compact-button"

<CompactButton.Root variant="stroke">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>

Examples

Variants

All visual variants: stroke (default with border and shadow), ghost (transparent background), white (solid white with shadow), and modifiable (no default styling, fully customizable via className).

<CompactButton.Root variant="stroke">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>
<CompactButton.Root variant="ghost">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>
<CompactButton.Root variant="white">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>
<CompactButton.Root variant="modifiable" className="text-error-base hover:bg-error-lighter">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>

Sizes

Compact buttons come in large (default) and medium sizes.

<CompactButton.Root>
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>
<CompactButton.Root size="medium">
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>

Full Radius

Use fullRadius for a circular button shape.

<CompactButton.Root fullRadius>
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>

Disabled

Disabled state removes interactivity and applies muted styling.

<CompactButton.Root disabled>
  <CompactButton.Icon as={RiAddLine} />
</CompactButton.Root>

As Child

Use the asChild prop with Radix Slot to render as a different element, such as a link.

<CompactButton.Root asChild>
  <a href="#">
    <CompactButton.Icon as={RiAddLine} />
  </a>
</CompactButton.Root>

API Reference

CompactButton.Root

The main compact button component.

Prop	Type	Default	Description
`variant`	`'stroke' \| 'ghost' \| 'white' \| 'modifiable'`	`'stroke'`	The visual style
`size`	`'large' \| 'medium'`	`'large'`	The size of the button
`fullRadius`	`boolean`	`false`	Renders as a circle instead of rounded square
`asChild`	`boolean`	`false`	Renders as child element using Radix Slot
`disabled`	`boolean`	`false`	Disables the button

CompactButton.Icon

Polymorphic icon container that receives variant and size from CompactButton.Root.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render as