Dynamic Button Showcase

Explore all variants, sizes, and features of our dynamic button component

Button Variants

Button Sizes

Icon Positioning

Special Features

Thai Text Examples

Usage Example

import { DynamicButton } from '@/components/ui/dynamic-button'

<DynamicButton
  variant="primary"
  size="lg"
  iconSrc="/icons/chevron-right.svg"
  iconAlt="Action"
  iconPosition="right"
  loading={false}
  ripple={true}
  fullWidth={false}
  onClick={() => console.log('Button clicked!')}
>
  เริ่มต้นใช้งาน
</DynamicButton>

Features & Benefits

🎨 Design System Integration

  • • Plus Jakarta Sans font family
  • • Consistent orange color palette
  • • Design system spacing and sizing
  • • Responsive breakpoints

⚡ Enhanced Functionality

  • • Ripple click effects
  • • Loading states with spinner
  • • Keyboard accessibility
  • • ARIA labels and support

🔧 Developer Experience

  • • TypeScript support
  • • Comprehensive prop types
  • • forwardRef implementation
  • • Class variance authority

🌍 International Support

  • • Thai language optimization
  • • RTL layout compatible
  • • Unicode text support
  • • Cultural design patterns