Fillable Button

Examples

Sizes

Default

Outline

Destructive

Secondary

Ghost

Link

Usage

import { FillableButton } from "@/components/gsap/fillable-button"export default function Home() {  return (      <FillableButton>Click me</FillableButton>  )}

Customizing

Custom Overlay Color

Use overlayClassname to replace the fill color with any Tailwind background class.

Icon

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

Border Radius

Loading

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

Props

FillableButton