React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StorePaymentRadioButton

Radio button component designed for payment plans and pricing options

Interactive Playground

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

monthly

States

Different button states

Unselected

Selected

Disabled

Without Price Label

Without Badge Label

Common Use Cases

Typical payment radio button implementations

Subscription Plans

Course Pricing

Membership Tiers

API Reference

Props

price

string - The price to display (e.g., "$29", "Free")

priceLabel

string - Additional text next to price (e.g., "per month", "one-time")

label

string - Badge label (e.g., "Popular", "Best Value", "Limited Time")

selected

boolean - Whether this option is currently selected

disabled

boolean - Disables the button

onClick

() => void - Click handler function

className

string - Additional CSS classes

children

React.ReactNode - The plan/option name or title

Usage Notes

  • Designed specifically for payment plans, pricing tiers, and subscription options
  • Selected state changes background to accent2 color with appropriate text contrast
  • The label prop creates a small badge (useful for "Popular", "Best Value", etc.)
  • Hover effect reduces opacity to 85% for better interactivity feedback
  • Use onClick to handle selection changes - component doesn't manage state internally