CallToActionButton Component

The CallToActionButton is a styled CTA button featuring a distinctive shooting star animation. It renders with a bottom border and right gradient border, with a hover effect that bleeds color up from the bottom.

Usage

Basic Button

<CallToActionButton label="Get Started" />

Kind Variants

The button supports two visual variants: primary (default) and secondary.

<CallToActionButton kind="primary" label="Primary Action" />
<CallToActionButton kind="secondary" label="Secondary Action" />

As Link

When an href is provided, the component renders as an anchor element instead of a button.

Visit Website

<CallToActionButton
  href="https://example.com"
  target="_blank"
  label="Visit Website"
/>

With Click Handler

<CallToActionButton
  label="Click Me"
  onClick={() => console.log("Button clicked!")}
/>

Disabled State

<CallToActionButton disabled label="Disabled Button" />

Multiple Buttons

When multiple buttons are rendered, their shooting star animations are automatically staggered to prevent simultaneous firing.

<CallToActionButton kind="primary" label="First" />
<CallToActionButton kind="primary" label="Second" />
<CallToActionButton kind="secondary" label="Third" />
<CallToActionButton kind="secondary" label="Fourth" />

Props

Name	Type	Default	Description
`kind`	`"primary" \| "secondary"`	"primary"	The visual style variant of the button. Primary uses the primary theme color, secondary uses the secondary theme color.
`disabled`	`boolean`	undefined	When true, the button is disabled and shows a not-allowed cursor.
`onClick`	`() => void`	undefined	Click handler function called when the button is clicked.
`href`	`string`	undefined	When provided, renders as an anchor element instead of a button.
`label`	`string`	undefined	The text content displayed inside the button.
`target`	`string`	undefined	The target attribute for anchor elements (e.g., "_blank" for new tab).
`styles`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the button.

Animation Details

The CallToActionButton features a shooting star animation where a spark travels up the right border of the button. The animation details are:

Duration - 4 seconds total cycle time

Spark visibility - Only visible for ~300ms (7.5% of cycle)

Stagger - Multiple buttons have delays of 0.8s increments

The animation respects the user's reduced motion preferences and will be disabled when prefers-reduced-motion is enabled.

Hover Effect

On hover, a gradient effect bleeds up from the bottom of the button, covering 30% of the button height. This creates a subtle highlight effect that draws attention to the interactive element.

The hover effect uses a gradient that transitions from transparent at the top to a 50% opacity version of the button's color at the bottom.

Theming

The CallToActionButton uses theme tokens for consistent styling across your application:

themeColors.primary500 - Primary variant color

themeColors.secondary500 - Secondary variant color

themeSizing.font1 - Font size

themeDetails.buttonBorderWidth - Border width (doubled for emphasis)

themeDetails.buttonOutlineOffset - Focus outline offset

Accessibility

The CallToActionButton includes accessibility features:

Focus visible outline with proper contrast in both light and dark modes

Disabled state shows not-allowed cursor

Renders as semantic button or anchor element depending on usage

Animation respects prefers-reduced-motion media query