Product UI Kit
Product Toggle Buttons
Single toggle controls for ProductToggle, ProductFavoriteButton, and ProductFavoriteActionButton. Favorite owns saved state over ProductToggle; non-toggle share actions live under Product Action Buttons.
ProductToggle
Single toggle actions
Default toggle action
Consumers own state, labels and surrounding runtime behavior.
Outline toggle action
Outline preserves toggle behavior with stronger border emphasis.
ProductToggle variant: default
ProductToggle variant: outline
ProductToggle sizes
ProductFavoriteButton
Favorite toggle button
ProductFavoriteButton / default
Owns the favorite visual state over ProductToggle.
ProductFavoriteButton / dark
Image-backed cards and Detail Hero overlay actions use the dark surface.
Favorite inactive
Favorite active
ProductFavoriteActionButton
Favorite action semantic wrapper
Default semantic action
Harbor day pass
Saved semantic action
Harbor day pass
Compact semantic action
Hidden beach
Dark card action
Coastal stay
Large Detail Hero action
Cala Nova