Examples
Default
Brand
Disabled
Sizes
Without Discount
Props
SubscribeButton
A subscription / purchase button pairing an action label with the current price and an optional struck-through previous price. Built onButton, so it inherits the same variants, sizes, negative dark-surface treatment, fullWidth, loading, and disabled behaviour.
The accessible name defaults to the label plus pricing (e.g. "Join now, $9.99, was $19.99"); pass aria-label to override.
string
required
Current price shown on the trailing side (e.g.
"$9.99/mo").ReactNode
default:"Join now"
Leading action label.
string
Previous price rendered struck-through before
SubscribeButtonProps.price.boolean
default:"false"
When
true, the button will take the full width of its container.boolean
default:"false"
When
true, replaces the label with a spinner and disables interaction.boolean
default:"false"
Forces the dark-surface treatment regardless of theme. Only honored on
primary, secondary, tertiary, and outline variants; ignored on all others. Use when placing the button on a dark background in a light theme (e.g. an inverted hero or modal)."32" | "40" | "48"
default:"48"
Height of the button in pixels.
"brand" | "primary" | "secondary" | "tertiary" | "outline"
default:"primary"
Visual style variant.
brand is the Figma “Upsell” (green) type.Exported types
Also exported from@fanvue/ui: SubscribeButtonProps, SubscribeButtonSize, SubscribeButtonVariant.
Setup: Installation · Theming