Prop	Type	Required	Default	Description
name	string	Yes	-	Icon name from PUIcon collection
disabled	boolean	No	false	Disables the button
flavor	normal \| outlined \| ghost	No	normal	Visual style variant
shape	rounded \| circle	No	circle	Button shape
size	small \| medium \| large	No	medium	Button size
customClass	string	No	''	Additional CSS classes

Styling

Base styling with Tailwind:

.pu-button-icon {
  @apply p-2 shadow-md transition duration-200 ease-in-out 
        flex justify-center items-center;
}

Flavor variants:

.pu-button-icon--normal {
  @apply bg-primary-light-500 border-2 rounded-lg text-primary-light-50;
}

.pu-button-icon--outlined {
  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500;
}

.pu-button-icon--ghost {
  @apply bg-transparent border-2 text-primary-light-500 border-transparent;
}

Interactive States

Hover effect:

.pu-button-icon:not(:disabled):hover {
  @apply shadow-primary-light-500/50 font-bold;
}

Disabled state:

.pu-button-icon--disabled {
  @apply opacity-50 cursor-not-allowed;
}