Prop	Type	Required	Default	Description
disabled	boolean	No	false	Disables interactive state
flavor	normal \| outlined \| ghost	No	normal	Visual style variant
shape	rounded \| circle	No	rounded	Border radius style
size	small \| medium \| large	No	medium	Button dimensions
customClass	string	No	''	Additional CSS classes
iconLeft	string	No	undefined	Left icon name
iconRight	string	No	undefined	Right icon name

Flavor Variants

Variant	Classes	Description
normal	`pu-button--normal`	Solid background with white text (Default)
outlined	`pu-button--outlined`	Transparent background with border
ghost	`pu-button--ghost`	Minimal style with no background/border

Size Variants

Size	Classes	Description
small	`pu-button--small`	Compact padding: px-2 py-1
medium	`pu-button--medium`	Standard padding: px-4 py-2 (Default)
large	`pu-button--large`	Large padding: px-6 py-3

Shape Variants

Shape	Classes	Description
rounded	`pu-button--rounded`	Standard border radius (Default)
circle	`pu-button--circle`	Fully rounded edges

Styling

Uses font-patrick font family class

Base styles applied with utility-first CSS:

.pu-button {
  @apply py-2 shadow-md transition duration-200 ease-in-out flex justify-center gap-1;
}
.pu-button:not(:disabled):hover {
  @apply shadow-primary-light-500/50 font-bold;
}

Icon colors adapt automatically to flavor
State management for disabled/hover states
Customizable through CSS classes or style overrides

Dependencies

Requires PUIcon component for icon support
Built with Tailwind CSS utility classes