Component States

Visual feedback patterns using the ripple animation system

State Color Legend

Each state uses a specific ripple color for consistent feedback

Hover (Orange→Pink→Blue ripple outward)
Focus (Orange→Pink→Blue pulse ring)
Active (Orange→Pink→Blue ripple inward)
Error (Red pulse)
Success (Brand gradient sweep)
Loading (Brand gradient flow)
Disabled (No animation)

Button States

Interactive button states with ripple feedback

Default
Hover
Focus
Active
Disabled
Loading
Error
Success

Input States

Form input states with visual feedback

Default
Hover
Focus
Disabled
Error
Success

Card States

Interactive card states

Default
Default
Hover
Hover
Focus
Focus
Active
Active
Selected
Selected
Disabled
Disabled

Checkbox States

Checkbox interaction states

Default
Default
Hover
Hover
Focus
Focus
Checked
Checked
Disabled
Disabled
Required
Error

Toggle States

Toggle switch interaction states

Off
Off
Hover
Hover
Focus
Focus
On
On
Disabled
Disabled

Animation Specifications

Timing and behavior for state animations

State Animation Duration Color
Hover Ripple outward 25ms interval, max radius 15 #FB923C → #F472B6 → #93C5FD
Focus Pulsing ring (color cycle) 2s loop #FB923C → #F472B6 → #93C5FD
Active Ripple inward 25ms interval #FB923C → #F472B6 → #93C5FD
Error Border pulse 1.5s loop Red (#EF4444)
Success Gradient sweep expand 2s loop #FB923C → #F472B6 → #93C5FD
Loading Gradient flow 1.5s loop #FB923C → #F472B6 → #93C5FD