React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

SiteButton

Product button component with multiple layout variants, pricing, reviews, and stock information

Interactive Playground

Customize the component properties and see the changes in real-time

Layout Variants

Different layout styles for the button component

Default

Bleed

Padding Vertical

Brim

Ode

Nova

Crest

Rung

Glint

API Reference

Props

title

string - Product title (default: "Button")

image

string - Product image URL (optional)

price

object - Price information with amount, sale_amount, and sale_amount_available properties

currency

string - Currency code (e.g., "USD")

reviews

Array<{ rating: number }> - Product reviews (optional)

productType

string - Product type (e.g., "course")

showDiscount

boolean - Show discount badge (default: false)

quantity

number - Available quantity (optional)

layout

"default" | "bleed" | "padding-vertical" | "brim" | "ode" | "nova" | "crest" | "rung" | "glint" - Layout variant

onClick

() => void - Click handler (optional)

className

string - Additional CSS classes (optional)

Usage Notes

Layout Variants

The component supports 9 different layout variants, each optimized for different theme styles. The layout can be controlled via the layout prop or automatically determined by the theme.

Price Display

Prices are only displayed for lead-generating product types (courses, digital downloads, etc.). The component automatically handles sale pricing and discount badges.

Stock Information

When a quantity is provided, the component displays stock information. If quantity is 0, it shows "Sold Out". Otherwise, it shows the number of items left.

Image Loading

The component includes a loading spinner that appears while the product image is loading, providing better user experience.