Displays an on/off switch control.
6 variants found
<Skeleton loading={isLoading}>
<Flex align="center" gap="5">
<SegmentedControl.Root
disabled={isAccessTypeChanging}
size="1"
style={isAccessTypeChanging ? { opacity: 0.7 } : undefined}
value={optimisticAccessType}
onValueChange={handleAccessChange}
>
<SegmentedControl.Item value={AccessType.NONE}>
None
</SegmentedControl.Item>
<SegmentedControl.Item value={AccessType.SOME}>
Some
</SegmentedControl.Item>
<SegmentedControl.Item value={AccessType.ALL}>
All
</SegmentedControl.Item>
</SegmentedControl.Root>
<Separator orientation="vertical" size="4" />
<Flex align="center" gap="2">
<Switch
checked={flagEnvironment?.flagEnabled}
color="purple"
disabled={flagEnvironment?.accessType === AccessType.NONE}
onCheckedChange={(flagEnabled) => {
if (flagEnabled) {
setIsEnableFlagDialogOpen(true);
} else {
setIsDisableFlagDialogOpen(true);
}
}}
/>
<Text size="2" weight="bold">
{flagEnvironment?.flagEnabled ? 'On' : 'Off'}
</Text>
</Flex>
</Flex>
</Skeleton>Used 40 times across 1 package
disabled
color
30 files
/branding/edit
Show 20 more files