Stripe Button

Smooth animated button crafted with refined glow and modern motion.

Installation

npx shadcn@latest add @scrollxui/stripe-button

import { StripeButton } from '@/components/ui/stripe-button';

<StripeButton className='italic'>Enter the Arena!</StripeButton>

Smooth animated button crafted with refined glow and modern motion.

Property	Type	Default	Description
`children`	React.ReactNode	`—`	Content displayed inside the button, typically text or icons.
`stripesSpeed`	number	`500`	Duration (in ms) for the diagonal stripe background shift on hover.
`variant`	"default" \| "compact"	`"default"`	Controls internal padding style. compact keeps height full with tighter layout.
`size`	"default" \| "sm" \| "lg" \| "icon"	`"default"`	Defines button height and padding. icon creates a square icon-only button.
`className`	string	`—`	Additional Tailwind or custom classes applied to the outer button wrapper.
`onClick`	() => void	`—`	Callback fired when the button is clicked.
`disabled`	boolean	`false`	Disables the button and prevents user interaction.