SegmentedMenu Beta
Open in Storybook Open in Figma
SegmentedMenu combines a SegmentedButtonGroup with a DropdownMenu to create a responsive component for picking one of multiple states.
'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h10v88H0z'/%3E%3Cpath fill='%23FD724F' d='M0 0h10v1H0z'/%3E%3Cpath fill='%23F34B37' d='M0 1h10v1H0z'/%3E%3Cpath fill='%23EF3C2D' d='M0 2h10v1H0z'/%3E%3Cpath fill='%23FA5D40' d='M0 3h10v1H0z'/%3E%3Cpath fill='%23FC8664' d='M0 4h10v1H0z'/%3E%3Cpath fill='%23FC9070' d='M0 5h10v1H0z'/%3E%3Cpath fill='%23FD7553' d='M0 6h10v1H0z'/%3E%3Cpath fill='%23F54E37' d='M0 7h10v1H0z'/%3E%3Cpath fill='%23EF392B' d='M0 8h10v1H0z'/%3E%3Cpath fill='%23EC3226' d='M0 9h10v1H0z'/%3E%3Cpath fill='%23F44F39' d='M0 10h10v1H0z'/%3E%3Cpath fill='%23FC6E4C' d='M0 11h10v1H0z'/%3E%3Cpath fill='%23FC6D4C' d='M0 12h10v1H0z'/%3E%3Cpath fill='%23FB6444' d='M0 13h10v1H0z'/%3E%3Cpath fill='%23FC7151' d='M0 14h10v1H0z'/%3E%3Cpath fill='%23FC8A69' d='M0 15h10v1H0z'/%3E%3Cpath fill='%23FCA78A' d='M0 16h10v1H0z'/%3E%3Cpath fill='%23FCBFA5' d='M0 17h10v1H0z'/%3E%3Cpath fill='%23FCC9B0' d='M0 18h10v1H0z'/%3E%3Cpath fill='%23FB886A' d='M0 19h10v1H0z'/%3E%3Cpath fill='%23FB6645' d='M0 20h10v1H0z'/%3E%3Cpath fill='%23FC815D' d='M0 21h10v1H0z'/%3E%3Cpath fill='%23FDC8B3' d='M0 22h10v1H0z'/%3E%3Cpath fill='%23FDDBCD' d='M0 23h10v1H0z'/%3E%3Cpath fill='%23FC9475' d='M0 24h10v1H0z'/%3E%3Cpath fill='%23FFB89E' d='M0 25h10v1H0z'/%3E%3Cpath fill='%23FBE5DA' d='M0 26h10v1H0z'/%3E%3Cpath fill='%23E3EBF4' d='M0 27h10v1H0z'/%3E%3Cpath fill='%23D8F2FF' d='M0 28h10v1H0z'/%3E%3Cpath fill='%23E1E6EC' d='M0 29h10v1H0z'/%3E%3Cpath fill='%23FAC0A9' d='M0 30h10v1H0z'/%3E%3Cpath fill='%23FEB396' d='M0 31h10v1H0z'/%3E%3Cpath fill='%23FCBFA6' d='M0 32h10v1H0z'/%3E%3Cpath fill='%23FDE5D8' d='M0 33h10v1H0z'/%3E%3Cpath fill='%23FCCDB9' d='M0 34h10v1H0z'/%3E%3Cpath fill='%23FDB89E' d='M0 35h10v1H0z'/%3E%3Cpath fill='%23FFD7C2' d='M0 36h10v1H0z'/%3E%3Cpath fill='%23F2E9E7' d='M0 37h10v1H0z'/%3E%3Cpath fill='%23D9EAF8' d='M0 38h10v1H0z'/%3E%3Cpath fill='%23C7DDF0' d='M0 39h10v1H0z'/%3E%3Cpath fill='%23BBD9F3' d='M0 40h10v1H0z'/%3E%3Cpath fill='%23CEDCEB' d='M0 41h10v1H0z'/%3E%3Cpath fill='%23FCE1D0' d='M0 42h10v1H0z'/%3E%3Cpath fill='%23DDDDE2' d='M0 43h10v1H0z'/%3E%3Cpath fill='%23C4DBEF' d='M0 44h10v1H0z'/%3E%3Cpath fill='%23F2DFD9' d='M0 45h10v1H0z'/%3E%3Cpath fill='%23FFDFCB' d='M0 46h10v1H0z'/%3E%3Cpath fill='%23F7E4DA' d='M0 47h10v1H0z'/%3E%3Cpath fill='%23E9EFF9' d='M0 48h10v1H0z'/%3E%3Cpath fill='%23B9D9EC' d='M0 49h10v1H0z'/%3E%3Cpath fill='%239EC9E0' d='M0 50h10v1H0z'/%3E%3Cpath fill='%23CFE1F2' d='M0 51h10v1H0z'/%3E%3Cpath fill='%2383B5DA' d='M0 52h10v1H0z'/%3E%3Cpath fill='%233D8FC5' d='M0 53h10v1H0z'/%3E%3Cpath fill='%2361A7D2' d='M0 54h10v1H0z'/%3E%3Cpath fill='%2360A9D3' d='M0 55h10v1H0z'/%3E%3Cpath fill='%2377B4D9' d='M0 56h10v1H0z'/%3E%3Cpath fill='%23C8DCF0' d='M0 57h10v1H0z'/%3E%3Cpath fill='%23C2DAEC' d='M0 58h10v1H0z'/%3E%3Cpath fill='%23D0CAEA' d='M0 59h10v1H0z'/%3E%3Cpath fill='%2369ACD6' d='M0 60h10v1H0z'/%3E%3Cpath fill='%237DB8D9' d='M0 61h10v1H0z'/%3E%3Cpath fill='%23A5CDE3' d='M0 62h10v1H0z'/%3E%3Cpath fill='%23CEE0F1' d='M0 63h10v1H0z'/%3E%3Cpath fill='%2394C2E2' d='M0 64h10v1H0z'/%3E%3Cpath fill='%2369ADD5' d='M0 65h10v1H0z'/%3E%3Cpath fill='%2393C4DF' d='M0 66h10v1H0z'/%3E%3Cpath fill='%23AAD1E4' d='M0 67h10v1H0z'/%3E%3Cpath fill='%2397C6DF' d='M0 68h10v1H0z'/%3E%3Cpath fill='%2374B4D9' d='M0 69h10v1H0z'/%3E%3Cpath fill='%234495C8' d='M0 70h10v1H0z'/%3E%3Cpath fill='%234895C8' d='M0 71h10v1H0z'/%3E%3Cpath fill='%23B4D1E9' d='M0 72h10v1H0z'/%3E%3Cpath fill='%23CDDFF1' d='M0 73h10v1H0z'/%3E%3Cpath fill='%23C6DCF0' d='M0 74h10v1H0z'/%3E%3Cpath fill='%23CADDF0' d='M0 75h10v1H0z'/%3E%3Cpath fill='%23B2D3E8' d='M0 76h10v1H0z'/%3E%3Cpath fill='%239AC9E0' d='M0 77h10v1H0zM0 78h10v1H0z'/%3E%3Cpath fill='%23BDD8EC' d='M0 79h10v1H0z'/%3E%3Cpath fill='%23C5DAEF' d='M0 80h10v1H0z'/%3E%3Cpath fill='%23B1D4E7' d='M0 81h10v1H0z'/%3E%3Cpath fill='%2374B1D4' d='M0 82h10v1H0z'/%3E%3Cpath fill='%233D8FC5' d='M0 83h10v1H0z'/%3E%3Cpath fill='%23398CC3' d='M0 84h10v1H0z'/%3E%3Cpath fill='%234D9BCB' d='M0 85h10v1H0z'/%3E%3Cpath fill='%2376B3D9' d='M0 86h10v1H0z'/%3E%3Cpath fill='%23C0D9EE' d='M0 87h10v1H0z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h10v88H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E)
#ClimateEmergencyOpen in Storybook Open in Figma
SegmentedMenu combines a SegmentedButtonGroup with a DropdownMenu to create a responsive component for picking one of multiple states.