React Shared Components
Interactive testing environment for react-shared components
Current: Default
SiteCalloutButton
Featured product callout button with image, pricing, reviews, and call-to-action
Interactive Playground
Customize the component properties and see the changes in real-time
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Layout Variants
Different layout styles for the callout button component
Default
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Bleed Horizontal
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Bleed Vertical
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Padding Vertical
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Brim
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Ode
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Nova
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Crest
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Rung
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Glint
Premium Course Bundle
Transform your skills with our comprehensive course bundle
API Reference
Props
titlestring - Product title (default: "Button")
button_textstring - Call-to-action button text (default: "Button Text")
taglinestring - Subheading/description text
imagestring - Product image URL (optional)
priceobject - Price information with amount, sale_amount, and sale_amount_available properties
currencystring - Currency code (e.g., "USD")
reviewsArray<{ rating: number }> - Product reviews (optional)
productTypestring - Product type (e.g., "course")
showDiscountboolean - Show discount badge (default: false)
quantitynumber - Available quantity (optional)
layout"default" | "bleed-horizontal" | "bleed-vertical" | "padding-vertical" | "brim" | "ode" | "nova" | "crest" | "rung" | "glint" - Layout variant
onButtonClick(data?: { preSelectValue: boolean }) => void - Button click handler (optional)
classNamestring - Additional CSS classes (optional)
Usage Notes
Featured Callout
This component is designed for prominent product callouts with larger images and more detailed information compared to the standard SiteButton. It's ideal for hero sections or featured product placements.
Layout Variants
The component supports 10 different layout variants, each optimized for different theme styles and content arrangements. Layouts include horizontal and vertical bleed options for full-width designs.
Dual CTA Buttons
The component includes two call-to-action buttons - one hidden and one visible. The visible button can pass a preSelectValue flag to the click handler for different behaviors.
Image Loading
Like SiteButton, this component includes a loading spinner that appears while the product image is loading, providing better user experience.