@mui/material#RadioGroup TypeScript Examples
The following examples show how to use
@mui/material#RadioGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From ExpressLRS-Configurator with GNU General Public License v3.0 | 5 votes |
|
FlashingMethodOptions: FunctionComponent<FlashingMethodsListProps> = (
props
) => {
const { onChange, currentTarget, currentDevice, firmwareVersionData } = props;
const targetMappingsSorted = useMemo(
() => sortDeviceTargets(currentDevice?.targets ?? []),
[currentDevice?.targets]
);
const onFlashingMethodChange = (
_event: React.ChangeEvent<HTMLInputElement>,
value: string
) => {
const target = targetMappingsSorted?.find((item) => {
return item.id === value;
});
onChange(target ?? null);
};
const flashingMethodRadioOption = useCallback(
(targetMapping: Target) => {
const label = (
<>
{!targetMapping.flashingMethod
? targetMapping.name
: targetMapping.flashingMethod}
{targetMapping.flashingMethod !== null && (
<FlashingMethodDescription
flashingMethod={targetMapping.flashingMethod}
deviceWikiUrl={currentDevice?.wikiUrl ?? null}
firmwareVersionData={firmwareVersionData}
/>
)}
</>
);
return (
<FormControlLabel
key={targetMapping.id}
value={targetMapping.id}
sx={styles.radioControl}
control={<Radio sx={styles.radio} color="primary" />}
label={label}
/>
);
},
[currentDevice?.wikiUrl, firmwareVersionData]
);
return (
<Box sx={styles.root}>
<Typography variant="h6" sx={styles.categoryTitle}>
Flashing Method
</Typography>
<FormControl component="fieldset" sx={styles.flashingMethods}>
<RadioGroup
row
value={currentTarget?.id ?? null}
onChange={onFlashingMethodChange}
defaultValue="top"
>
{targetMappingsSorted?.map((item) => {
return flashingMethodRadioOption(item);
})}
</RadioGroup>
</FormControl>
</Box>
);
}
Example #2
| Source File: RadioButtonGroup.tsx From frontend with MIT License | 5 votes |
|
export default function RadioButtonGroup({
name,
options,
muiRadioGroupProps,
muiRadioButtonGridProps,
}: RadioButtonGroup) {
const { t } = useTranslation('one-time-donation')
const [field, meta, { setValue }] = useField(name)
const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
return (
<FormControl
fullWidth
required
component="fieldset"
error={Boolean(meta.error) && Boolean(meta.touched)}>
<RadioGroup
onChange={(e, v) => {
setValue(v)
}}
value={field.value}
name={name}
{...muiRadioGroupProps}>
<Grid rowSpacing={2} columnSpacing={2} container>
{options ? (
<>
{options.map(({ label: optionLabel, value: optionValue }, index) => (
<Grid key={index} item xs={12} sm={6} {...muiRadioButtonGridProps}>
<PriceRadioButton
value={optionValue}
checked={optionValue == field.value}
label={optionLabel}
/>
</Grid>
))}
</>
) : (
<Typography>There are no avaliable choices you can make :(</Typography>
)}
</Grid>
</RadioGroup>
{Boolean(meta.error) && Boolean(meta.touched) && helperText && (
<FormHelperText error>{t(helperText)}</FormHelperText>
)}
</FormControl>
)
}
Example #3
| Source File: index.tsx From ExpressLRS-Configurator with GNU General Public License v3.0 | 4 votes |
|
DeviceOptionsForm: FunctionComponent<DeviceOptionsFormProps> = (
props
) => {
const { target, deviceOptions, onChange, firmwareVersionData } = props;
const categories = userDefinesToCategories(deviceOptions.userDefineOptions);
const onOptionUpdate = (data: UserDefine) => {
const updatedOptions = deviceOptions?.userDefineOptions.map((opt) => {
if (opt.key === data.key) {
return {
...data,
};
}
// if part of the same optionGroup as the item being updated, disable it.
if (
data.enabled &&
data.optionGroup &&
data.optionGroup === opt.optionGroup
) {
return {
...opt,
enabled: false,
};
}
return opt;
});
onChange({
...deviceOptions,
userDefineOptions: updatedOptions,
});
};
const onUserDefinesTxt = (
event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
) => {
onChange({
...deviceOptions,
userDefinesTxt: event.currentTarget.value,
});
};
const onUserDefinesMode = (
_event: React.ChangeEvent<HTMLInputElement>,
value: string
) => {
onChange({
...deviceOptions,
userDefinesMode: value as UserDefinesMode,
});
};
return (
<>
<FormControl component="fieldset" sx={styles.userDefinesMode}>
<RadioGroup
row
value={deviceOptions.userDefinesMode}
onChange={onUserDefinesMode}
defaultValue="top"
>
<FormControlLabel
value={UserDefinesMode.UserInterface}
sx={styles.radioControl}
control={<Radio sx={styles.radio} color="primary" />}
label="Standard mode"
/>
<FormControlLabel
value={UserDefinesMode.Manual}
sx={styles.radioControl}
control={<Radio sx={styles.radio} color="primary" />}
label="Manual mode"
/>
</RadioGroup>
</FormControl>
{deviceOptions.userDefinesMode === UserDefinesMode.Manual && (
<>
<TextField
sx={styles.textarea}
multiline
label="user_defines.txt"
onBlur={onUserDefinesTxt}
defaultValue={deviceOptions.userDefinesTxt}
fullWidth
rows={10}
/>
</>
)}
{target !== null &&
categories !== null &&
deviceOptions.userDefinesMode === UserDefinesMode.UserInterface && (
<>
<Grid container spacing={3}>
<Grid item xs>
{categories[UserDefineCategory.RegulatoryDomains]?.length >
0 && (
<>
<Typography variant="h6" sx={styles.categoryTitle}>
Regulatory domains
</Typography>
<UserDefinesList
options={categories[UserDefineCategory.RegulatoryDomains]}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
{categories[UserDefineCategory.BindingPhrase]?.length > 0 && (
<>
<Typography variant="h6">Binding phrase setup</Typography>
<UserDefinesList
options={categories[UserDefineCategory.BindingPhrase]}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
{categories[UserDefineCategory.CompatibilityOptions]?.length >
0 && (
<>
<Typography variant="h6">Compatibility options</Typography>
<UserDefinesList
options={
categories[UserDefineCategory.CompatibilityOptions]
}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
</Grid>
<Grid item xs>
{categories[UserDefineCategory.PerformanceOptions]?.length >
0 && (
<>
<Typography variant="h6">Performance options</Typography>
<UserDefinesList
options={
categories[UserDefineCategory.PerformanceOptions]
}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
{categories[UserDefineCategory.ExtraData]?.length > 0 && (
<>
<Typography variant="h6">Extra data</Typography>
<UserDefinesList
options={categories[UserDefineCategory.ExtraData]}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
{categories[UserDefineCategory.NetworkOptions]?.length > 0 && (
<>
<Typography variant="h6">Network</Typography>
<UserDefinesList
options={categories[UserDefineCategory.NetworkOptions]}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
{categories[UserDefineCategory.OtherOptions]?.length > 0 && (
<>
<Typography variant="h6">Other options</Typography>
<UserDefinesList
options={categories[UserDefineCategory.OtherOptions]}
onChange={onOptionUpdate}
firmwareVersionData={firmwareVersionData}
/>
</>
)}
</Grid>
</Grid>
</>
)}
</>
);
}
Example #4
| Source File: ChapterOptions.tsx From Tachidesk-WebUI with Mozilla Public License 2.0 | 4 votes |
|
export default function ChapterOptions(props: IProps) {
const { options, optionsDispatch } = props;
const [filtersOpen, setFiltersOpen] = useState(false);
const [tabNum, setTabNum] = useState(0);
const filterOptions = useCallback(
(value: NullAndUndefined<boolean>, name: string) => {
optionsDispatch({ type: 'filter', filterType: name.toLowerCase(), filterValue: value });
}, [],
);
return (
<>
<IconButton
onClick={() => setFiltersOpen(!filtersOpen)}
color={options.active ? 'warning' : 'default'}
>
<FilterListIcon />
</IconButton>
<Drawer
anchor="bottom"
open={filtersOpen}
onClose={() => setFiltersOpen(false)}
PaperProps={{
style: {
maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
minHeight: '150px',
},
}}
>
<Box>
<Tabs
key={tabNum}
value={tabNum}
variant="fullWidth"
onChange={(e, newTab) => setTabNum(newTab)}
indicatorColor="primary"
textColor="primary"
>
<Tab value={0} label="Filter" />
<Tab value={1} label="Sort" />
<Tab value={2} label="Display" />
</Tabs>
<TabPanel index={0} currentIndex={tabNum}>
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '150px' }}>
<FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={options.unread} onChange={filterOptions} />} label="Unread" />
<FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={options.downloaded} onChange={filterOptions} />} label="Downloaded" />
<FormControlLabel control={<ThreeStateCheckbox name="Bookmarked" checked={options.bookmarked} onChange={filterOptions} />} label="Bookmarked" />
</Box>
</TabPanel>
<TabPanel index={1} currentIndex={tabNum}>
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '150px' }}>
{
SortTab.map((item) => (
<Stack
direction="row"
alignItems="center"
spacing="2"
sx={{ py: 1, height: 42 }}
onClick={() => (item[0] !== options.sortBy
? optionsDispatch({ type: 'sortBy', sortBy: item[0] })
: optionsDispatch({ type: 'sortReverse' }))}
>
<Box sx={{ height: 24, width: 24 }}>
{
options.sortBy === item[0]
&& (options.reverse
? (<ArrowUpward color="primary" />) : (<ArrowDownward color="primary" />))
}
</Box>
<Typography>{item[1]}</Typography>
</Stack>
))
}
</Box>
</TabPanel>
<TabPanel index={2} currentIndex={tabNum}>
<Stack flexDirection="column" sx={{ minHeight: '150px' }}>
<RadioGroup name="chapter-title-display" onChange={() => optionsDispatch({ type: 'showChapterNumber' })} value={options.showChapterNumber}>
<FormControlLabel label="By Source Title" value="title" control={<Radio checked={!options.showChapterNumber} />} />
<FormControlLabel label="By Chapter Number" value="chapterNumber" control={<Radio checked={options.showChapterNumber} />} />
</RadioGroup>
</Stack>
</TabPanel>
</Box>
</Drawer>
</>
);
}
Example #5
| Source File: IntervalSelector.tsx From your_spotify with GNU General Public License v3.0 | 4 votes |
|
export default function IntervalSelector({
value,
onChange,
selectType,
forceTiny,
}: IntervalSelectorProps) {
const upmd = !useMediaQuery('(max-width: 1250px)') && !forceTiny;
const [open, setOpen] = useState(false);
const [customIntervalDate, setCustomIntervalDate] = useState<Range>({
key: 'range',
startDate: cloneDate(lastWeek),
endDate: cloneDate(now),
color: '#000000',
});
const existingInterval = useMemo(() => getAllIndexFromIntervalDetail(value), [value]);
const internOnChange = useCallback(
(index: number) => {
if (index === -1) {
setOpen(true);
} else {
onChange(allIntervals[index]);
}
},
[onChange],
);
let content: React.ReactNode;
if (!upmd) {
content = (
<Select
variant={selectType}
value={existingInterval}
onChange={(ev) => internOnChange(ev.target.value as number)}>
{allIntervals.map((inter, index) => (
<MenuItem key={inter.name} value={index}>
{inter.name}
</MenuItem>
))}
<MenuItem value={-1} onClick={() => setOpen(true)}>
Custom
</MenuItem>
</Select>
);
} else {
content = (
<div className={s.radiogroup}>
<RadioGroup
row
value={existingInterval}
onChange={(ev) => internOnChange(ev.target.value as unknown as number)}
name="interval radio group">
{allIntervals.map((inter, index) => (
<FormControlLabel
key={inter.name}
value={index}
control={<Radio />}
label={<Text>{inter.name}</Text>}
/>
))}
</RadioGroup>
<IconButton size="small" onClick={() => setOpen(true)}>
<Settings style={{ color: existingInterval === -1 ? '#000000' : undefined }} />
</IconButton>
</div>
);
}
const onCustomChange = useCallback((a: RangeKeyDict) => {
setCustomIntervalDate(a.range);
}, []);
const goodRange = useMemo(
() => Boolean(customIntervalDate.startDate && customIntervalDate.endDate),
[customIntervalDate.endDate, customIntervalDate.startDate],
);
const setCustom = useCallback(() => {
if (!customIntervalDate.startDate || !customIntervalDate.endDate) {
return;
}
onChange({
type: 'custom',
name: 'custom',
interval: {
start: startOfDay(customIntervalDate.startDate),
end: endOfDay(customIntervalDate.endDate),
timesplit: getAppropriateTimesplitFromRange(
customIntervalDate.startDate,
customIntervalDate.endDate,
),
},
});
setOpen(false);
}, [customIntervalDate, onChange]);
return (
<>
{content}
<Dialog title="Custom date range" open={open} onClose={() => setOpen(false)}>
<div className={s.dialogcontent}>
<div>
<DateRangePicker ranges={[customIntervalDate]} onChange={onCustomChange} />
</div>
<Button variant="contained" onClick={setCustom} disabled={!goodRange}>
Apply
</Button>
</div>
</Dialog>
</>
);
}
Example #6
| Source File: RadioButtonGroup.tsx From react-hook-form-mui with MIT License | 4 votes |
|
export default function RadioButtonGroup({
helperText,
options,
label,
name,
parseError,
labelKey = 'label',
valueKey = 'id',
required,
emptyOptionLabel,
returnObject,
row,
control,
...rest
}: RadioButtonGroupProps): JSX.Element {
const theme = useTheme()
const { field: { value, onChange }, fieldState: { invalid, error } } = useController({
name,
rules: required ? { required: 'This field is required' } : undefined,
control
})
helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : helperText
const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
const radioValue = (event.target as HTMLInputElement).value
const returnValue = returnObject
? options.find(items => items[valueKey] === radioValue)
: radioValue
// setValue(name, returnValue, { shouldValidate: true })
onChange(returnValue)
if (typeof rest.onChange === 'function') {
rest.onChange(returnValue)
}
}
return (
<FormControl error={invalid}>
{label && <FormLabel required={required} error={invalid}>{label}</FormLabel>}
<RadioGroup onChange={onRadioChange}
name={name}
row={row}
value={value || ''}>
{emptyOptionLabel && (
<FormControlLabel
control={<Radio sx={{
color: invalid ? theme.palette.error.main : undefined
}} checked={!value} />}
label={emptyOptionLabel}
value=""
/>
)}
{options.map((option: any) => {
const optionKey = option[valueKey]
if (!optionKey) {
console.error(
`CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
option
)
}
const isChecked = !!(
value &&
(returnObject
? value[valueKey] === optionKey
: value === optionKey)
)
return (
<FormControlLabel
control={<Radio sx={{
color: invalid ? theme.palette.error.main : undefined
}} checked={isChecked} />}
value={optionKey}
label={option[labelKey]}
key={optionKey}
/>
)
})}
</RadioGroup>
{helperText && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
)
}
Example #7
| Source File: IconsScreen.tsx From console with GNU Affero General Public License v3.0 | 4 votes |
|
IconsScreen = ({ classes }: IIconsScreenSimple) => {
const [color, setColor] = useState<string>("default");
return (
<div className={classes.container}>
<Grid container>
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Color</FormLabel>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="default"
name="radio-buttons-group"
onChange={(c) => {
setColor(c.target.value);
}}
>
<FormControlLabel value="def" control={<Radio />} label="Default" />
<FormControlLabel value="red" control={<Radio />} label="Color" />
</RadioGroup>
</FormControl>
</Grid>
<h1>Logos</h1>
<Grid
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
>
<Grid item xs={3}>
<cicons.ConsoleLogo />
<br />
ConsoleLogo
</Grid>
<Grid item xs={3}>
<cicons.LoginMinIOLogo />
<br />
LoginMinIOLogo
</Grid>
<Grid item xs={3}>
<cicons.OperatorLogo />
<br />
OperatorLogo
</Grid>
</Grid>
<h1>Loaders</h1>
<Grid
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
>
<Grid item xs={3}>
<Loader />
<br />
Loader
</Grid>
</Grid>
<h1>Icons</h1>
<Grid
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
>
<Grid item xs={3} sm={2} md={1}>
<cicons.AccountIcon />
<br />
AccountIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AddAccessRuleIcon />
<br />
AddAccessRuleIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AddFolderIcon />
<br />
AddFolderIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AddIcon />
<br />
AddIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AddMembersToGroupIcon />
<br />
AddMembersToGroupIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AddNewTagIcon />
<br />
AddNewTagIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AlertIcon />
<br />
AlertIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AllBucketsIcon />
<br />
AllBucketsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ArrowIcon />
<br />
ArrowIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ArrowRightIcon />
<br />
ArrowRightIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AzureTierIcon />
<br />
AzureTierIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AzureTierIconXs />
<br />
AzureTierIconXs
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BackSettingsIcon />
<br />
BackSettingsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BucketEncryptionIcon />
<br />
BucketEncryptionIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BucketQuotaIcon />
<br />
BucketQuotaIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BucketReplicationIcon />
<br />
BucketReplicationIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BucketsIcon />
<br />
BucketsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CalendarIcon />
<br />
CalendarIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CallHomeFeatureIcon />
<br />
CallHomeFeatureIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CancelledIcon />
<br />
CancelledIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ChangeAccessPolicyIcon />
<br />
ChangeAccessPolicyIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ChangePasswordIcon />
<br />
ChangePasswordIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CircleIcon />
<br />
CircleIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ClosePanelIcon />
<br />
ClosePanelIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ClustersIcon />
<br />
ClustersIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CollapseIcon />
<br />
CollapseIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ComputerLineIcon />
<br />
ComputerLineIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ConfigurationsListIcon />
<br />
ConfigurationsListIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ConfirmDeleteIcon />
<br />
ConfirmDeleteIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ConfirmModalIcon />
<br />
ConfirmModalIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ConsoleIcon />
<br />
ConsoleIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CopyIcon />
<br />
CopyIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CreateGroupIcon />
<br />
CreateGroupIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CreateIcon />
<br />
CreateIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CreateNewPathIcon />
<br />
CreateNewPathIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.CreateUserIcon />
<br />
CreateUserIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DashboardIcon />
<br />
DashboardIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DeleteIcon />
<br />
DeleteIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DeleteNonCurrentIcon />
<br />
DeleteNonCurrentIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DiagnosticsFeatureIcon />
<br />
DiagnosticsFeatureIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DiagnosticsIcon />
<br />
DiagnosticsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DisabledIcon />
<br />
DisabledIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DocumentationIcon />
<br />
DocumentationIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DownloadIcon />
<br />
DownloadIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DownloadStatIcon />
<br />
DownloadStatIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DriveFormatErrorsIcon />
<br />
DriveFormatErrorsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.DrivesIcon />
<br />
DrivesIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EditIcon />
<br />
EditIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EditTagIcon />
<br />
EditTagIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EditTenantIcon />
<br />
EditTenantIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EditYamlIcon />
<br />
EditYamlIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EditorThemeSwitchIcon />
<br />
EditorThemeSwitchIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EgressIcon />
<br />
EgressIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EnabledIcon />
<br />
EnabledIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.EventSubscriptionIcon />
<br />
EventSubscriptionIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileBookIcon />
<br />
FileBookIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileCloudIcon />
<br />
FileCloudIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileCodeIcon />
<br />
FileCodeIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileConfigIcon />
<br />
FileConfigIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileDbIcon />
<br />
FileDbIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileFontIcon />
<br />
FileFontIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileImageIcon />
<br />
FileImageIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileLinkIcon />
<br />
FileLinkIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileLockIcon />
<br />
FileLockIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileMissingIcon />
<br />
FileMissingIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileMusicIcon />
<br />
FileMusicIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FilePdfIcon />
<br />
FilePdfIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FilePptIcon />
<br />
FilePptIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileTxtIcon />
<br />
FileTxtIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileVideoIcon />
<br />
FileVideoIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileWorldIcon />
<br />
FileWorldIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileXlsIcon />
<br />
FileXlsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FileZipIcon />
<br />
FileZipIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FolderIcon />
<br />
FolderIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FormatDrivesIcon />
<br />
FormatDrivesIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.GoogleTierIcon />
<br />
GoogleTierIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.GoogleTierIconXs />
<br />
GoogleTierIconXs
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.GroupsIcon />
<br />
GroupsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.HardBucketQuotaIcon />
<br />
HardBucketQuotaIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.HealIcon />
<br />
HealIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.HelpIcon />
<br />
HelpIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.HelpIconFilled />
<br />
HelpIconFilled
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.HistoryIcon />
<br />
HistoryIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.IAMPoliciesIcon />
<br />
IAMPoliciesIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.InfoIcon />
<br />
InfoIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.JSONIcon />
<br />
JSONIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LambdaBalloonIcon />
<br />
LambdaBalloonIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LambdaIcon />
<br />
LambdaIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LambdaNotificationsIcon />
<br />
LambdaNotificationsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LegalHoldIcon />
<br />
LegalHoldIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LicenseIcon />
<br />
LicenseIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LifecycleConfigIcon />
<br />
LifecycleConfigIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LinkIcon />
<br />
LinkIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LockIcon />
<br />
LockIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LogoutIcon />
<br />
LogoutIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LogsIcon />
<br />
LogsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.MetadataIcon />
<br />
MetadataIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.MinIOTierIcon />
<br />
MinIOTierIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.MinIOTierIconXs />
<br />
MinIOTierIconXs
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.MirroringIcon />
<br />
MirroringIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.MultipleBucketsIcon />
<br />
MultipleBucketsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NewAccountIcon />
<br />
NewAccountIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NewPathIcon />
<br />
NewPathIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NewPoolIcon />
<br />
NewPoolIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NextArrowIcon />
<br />
NextArrowIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectBrowser1Icon />
<br />
ObjectBrowser1Icon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectBrowserFolderIcon />
<br />
ObjectBrowserFolderIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectBrowserIcon />
<br />
ObjectBrowserIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectInfoIcon />
<br />
ObjectInfoIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectManagerIcon />
<br />
ObjectManagerIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ObjectPreviewIcon />
<br />
ObjectPreviewIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OfflineRegistrationBackIcon />
<br />
OfflineRegistrationBackIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OfflineRegistrationIcon />
<br />
OfflineRegistrationIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OnlineRegistrationBackIcon />
<br />
OnlineRegistrationBackIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OnlineRegistrationIcon />
<br />
OnlineRegistrationIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OpenListIcon />
<br />
OpenListIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PasswordKeyIcon />
<br />
PasswordKeyIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PerformanceFeatureIcon />
<br />
PerformanceFeatureIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PermissionIcon />
<br />
PermissionIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PreviewIcon />
<br />
PreviewIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PrometheusErrorIcon />
<br />
PrometheusErrorIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.PrometheusIcon />
<br />
PrometheusIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RecoverIcon />
<br />
RecoverIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RedoIcon />
<br />
RedoIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RefreshIcon />
<br />
RefreshIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RemoveAllIcon />
<br />
RemoveAllIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RemoveIcon />
<br />
RemoveIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ReportedUsageFullIcon />
<br />
ReportedUsageFullIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ReportedUsageIcon />
<br />
ReportedUsageIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.RetentionIcon />
<br />
RetentionIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.S3TierIcon />
<br />
S3TierIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.S3TierIconXs />
<br />
S3TierIconXs
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SearchIcon />
<br />
SearchIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SelectAllIcon />
<br />
SelectAllIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SelectMultipleIcon />
<br />
SelectMultipleIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ServersIcon />
<br />
ServersIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ServiceAccountCredentialsIcon />
<br />
ServiceAccountCredentialsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ServiceAccountIcon />
<br />
ServiceAccountIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ServiceAccountsIcon />
<br />
ServiceAccountsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SettingsIcon />
<br />
SettingsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ShareIcon />
<br />
ShareIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SpeedtestIcon />
<br />
SpeedtestIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.StorageIcon />
<br />
StorageIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SyncIcon />
<br />
SyncIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TagsIcon />
<br />
TagsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TenantsIcon />
<br />
TenantsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TenantsOutlineIcon />
<br />
TenantsOutlineIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TiersIcon />
<br />
TiersIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TiersNotAvailableIcon />
<br />
TiersNotAvailableIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.ToolsIcon />
<br />
ToolsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TotalObjectsIcon />
<br />
TotalObjectsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TraceIcon />
<br />
TraceIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.TrashIcon />
<br />
TrashIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UploadFile />
<br />
UploadFile
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UploadFolderIcon />
<br />
UploadFolderIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UploadIcon />
<br />
UploadIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UploadStatIcon />
<br />
UploadStatIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UptimeIcon />
<br />
UptimeIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.UsersIcon />
<br />
UsersIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.VerifiedIcon />
<br />
VerifiedIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.VersionIcon />
<br />
VersionIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.VersionsIcon />
<br />
VersionsIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.WarnIcon />
<br />
WarnIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.WarpIcon />
<br />
WarpIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.WatchIcon />
<br />
WatchIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.AlertCloseIcon />
<br />
AlertCloseIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.OpenSourceIcon />
<br />
OpenSourceIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.LicenseDocIcon />
<br />
LicenseDocIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.BackIcon />
<br />
BackIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.FilterIcon />
<br />
FilterIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.SuccessIcon />
<br />
SuccessIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NetworkGetIcon />
<br />
NetworkGetIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<cicons.NetworkPutIcon />
<br />
NetworkPutIcon
</Grid>
</Grid>
<h1>Menu Icons</h1>
<Grid
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
>
<Grid item xs={3} sm={2} md={1}>
<micons.AccessMenuIcon />
<br />
AccessMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.AccountsMenuIcon />
<br />
AccountsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.AuditLogsMenuIcon />
<br />
AuditLogsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.BucketsMenuIcon />
<br />
BucketsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.CallHomeMenuIcon />
<br />
CallHomeMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.DiagnosticsMenuIcon />
<br />
DiagnosticsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.DrivesMenuIcon />
<br />
DrivesMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.GroupsMenuIcon />
<br />
GroupsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.HealthMenuIcon />
<br />
HealthMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.IdentityMenuIcon />
<br />
IdentityMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.InspectMenuIcon />
<br />
InspectMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.LogsMenuIcon />
<br />
LogsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.MenuCollapsedIcon />
<br />
MenuCollapsedIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.MenuExpandedIcon />
<br />
MenuExpandedIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.MetricsMenuIcon />
<br />
MetricsMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.MonitoringMenuIcon />
<br />
MonitoringMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.PerformanceMenuIcon />
<br />
PerformanceMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.ProfileMenuIcon />
<br />
ProfileMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.RegisterMenuIcon />
<br />
RegisterMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.SupportMenuIcon />
<br />
SupportMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.TraceMenuIcon />
<br />
TraceMenuIcon
</Grid>
<Grid item xs={3} sm={2} md={1}>
<micons.UsersMenuIcon />
<br />
UsersMenuIcon
</Grid>
</Grid>
</div>
);
}
