React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreSelectButton

Selectable button component for toggle groups and option selection

Interactive Playground

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

option1

States

Different button states

Unselected

Selected

Disabled (Unselected)

Disabled (Selected)

Common Use Cases

Typical select button implementations

View Toggle

Time Period Selection

Size Selection

Filter Options

Category Selection

Binary Choice

API Reference

Props

variant

'default' - Button style variant (currently only 'default' is available)

size

'md' - Button size (currently only 'md' is available)

selected

boolean - Whether this button is currently selected

disabled

boolean - Disables the button

onClick

() => void - Click handler function

className

string - Additional CSS classes

children

React.ReactNode - Button label or content

Usage Notes

  • Perfect for toggle groups, filters, and option selection interfaces
  • Selected state changes background to accent2 color with appropriate text contrast
  • Unselected buttons have a transparent background with border
  • Hover effect changes background to accent2 for better interactivity feedback
  • Use onClick to handle selection changes - component doesn't manage state internally
  • Works well in horizontal layouts with flex gap for spacing
  • Note: The disabled prop is functional (prevents clicks) but currently has no visual styling to indicate the disabled state