Add / Edit spool

Opens as a dialog over Filament. Pick a scenario to see each state.

← Back to Filament
Scenario

Control states: v3 specimen

Every state changes something other than shadow direction. Switch themes with the toggle to check both.

Rest
raised + 1px border (3:1)
Hover
border turns accent
Pressed / on
inset + wash fill + ✓ + accent border
Focused
2px outline, 3px offset
Disabled
flat + dashed border + muted text
Primary
ink on light violet (6.14:1 dark)
Primary pressed
deeper fill + ✓ + ring
Danger
red text + red border
Input rest
inset + border
Input focus
outline, border unchanged
Input disabled
dashed, flat

Too much

Input error
2px red + ⚠ + message