Colour-shifting segmented control
A segmented control whose background and indicator shift tone depending on the option you choose.
Settings
Code
<div class="uv-fsc" style="--t:0"><span class="p"></span><button data-t="0" class="on">All</button><button data-t="1">Active</button><button data-t="2">Done</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Made for status filters. A to-do app switching between All, Active and Done, or the orders page of an online shop showing pending, shipped and delivered. The colour change gives each state its own mood, so people notice at a glance which view they are in. Worth a look if you need a status filter or colour-coded tabs.
Choose colours that make sense for the states: a neutral tone for “All”, something greener for finished work. Don't rely on colour alone, though. The label still has to say what is selected, for people who can't tell the shades apart.