@mui/material#Fab JavaScript Examples

The following examples show how to use @mui/material#Fab. 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: SecondarySidebarToggle.jsx    From matx-react with MIT License 6 votes vote down vote up 
SecondarySidebarToggle = () => {
  const { settings, updateSettings } = useSettings();

  const toggle = () => {
    updateSettings({
      secondarySidebar: { open: !settings.secondarySidebar.open },
    });
  };

  const { palette } = useTheme();
  const textColor = palette.primary.contrastText;

  return (
    <Toggle className={clsx({ open: settings.secondarySidebar.open })}>
      {settings.secondarySidebar.open && (
        <IconButton onClick={toggle} size="small" aria-label="toggle">
          <Icon sx={{ color: textColor }}>close</Icon>
        </IconButton>
      )}

      {!settings.secondarySidebar.open && (
        <Fab color="primary" aria-label="expand" onClick={toggle}>
          <Icon sx={{ color: textColor }}>settings</Icon>
        </Fab>
      )}
    </Toggle>
  );
}
Example #2
Source File: RowCards.jsx    From matx-react with MIT License 5 votes vote down vote up 
StarOutline = styled(Fab)(() => ({
  marginLeft: 0,
  boxShadow: 'none',
  background: '#08ad6c !important',
  backgroundColor: 'rgba(9, 182, 109, 1) !important',
}))
Example #3
Source File: RowCards.jsx    From matx-react with MIT License 5 votes vote down vote up 
DateRange = styled(Fab)(({ theme }) => ({
  marginLeft: 0,
  boxShadow: 'none',
  color: 'white !important',
  background: `${theme.palette.error.main} !important`,
}))
Example #4
Source File: StatCards2.jsx    From matx-react with MIT License 5 votes vote down vote up 
FabIcon = styled(Fab)(() => ({
  width: '44px !important',
  height: '44px !important',
  boxShadow: 'none !important',
}))
Example #5
Source File: AppButton.jsx    From matx-react with MIT License 4 votes vote down vote up 
export default function AppButton() {
  return (
    <AppButtonRoot>
      <Box className="breadcrumb">
        <Breadcrumb
          routeSegments={[{ name: 'Material', path: '/material' }, { name: 'Buttons' }]}
        />
      </Box>

      <SimpleCard title="contained buttons">
        <StyledButton variant="contained" color="inherit">
          Default
        </StyledButton>

        <StyledButton variant="contained" color="primary">
          Primary
        </StyledButton>

        <StyledButton variant="contained" color="secondary">
          Secondary
        </StyledButton>

        <StyledButton variant="contained" color="secondary" disabled>
          Disabled
        </StyledButton>

        <StyledButton variant="contained" href="#contained-buttons">
          Link
        </StyledButton>

        <input accept="image/*" className="input" id="contained-button-file" multiple type="file" />
        <label htmlFor="contained-button-file">
          <StyledButton variant="contained" component="span">
            Upload
          </StyledButton>
        </label>
      </SimpleCard>

      <Box py="12px" />

      <SimpleCard title="text buttons">
        <StyledButton>Default</StyledButton>
        <StyledButton color="primary">Primary</StyledButton>
        <StyledButton color="secondary">Secondary</StyledButton>
        <StyledButton disabled>Disabled</StyledButton>
        <StyledButton href="#text-buttons">Link</StyledButton>

        <input accept="image/*" className="input" id="text-button-file" multiple type="file" />
        <label htmlFor="text-button-file">
          <StyledButton component="span">Upload</StyledButton>
        </label>
      </SimpleCard>

      <Box py="12px" />

      <SimpleCard title="outlined buttons">
        <StyledButton variant="outlined">Default</StyledButton>
        <StyledButton variant="outlined" color="primary">
          Primary
        </StyledButton>

        <StyledButton variant="outlined" color="secondary">
          Secondary
        </StyledButton>

        <StyledButton variant="outlined" disabled>
          Disabled
        </StyledButton>

        <StyledButton variant="outlined" href="#outlined-buttons">
          Link
        </StyledButton>

        <input accept="image/*" className="input" id="outlined-button-file" multiple type="file" />
        <label htmlFor="outlined-button-file">
          <StyledButton variant="outlined" component="span">
            Upload
          </StyledButton>
        </label>

        <StyledButton variant="outlined" color="inherit">
          Inherit
        </StyledButton>
      </SimpleCard>

      <Box py="12px" />

      <SimpleCard title="icon buttons">
        <IconButton className="button" aria-label="Delete">
          <Icon>delete</Icon>
        </IconButton>

        <IconButton className="button" aria-label="Delete" disabled color="primary">
          <Icon>delete</Icon>
        </IconButton>

        <IconButton color="secondary" className="button" aria-label="Add an alarm">
          <Icon>alarm</Icon>
        </IconButton>

        <IconButton color="primary" className="button" aria-label="Add to shopping cart">
          <Icon>add_shopping_cart</Icon>
        </IconButton>

        <input accept="image/*" className="input" id="icon-button-file" type="file" />
        <label htmlFor="icon-button-file">
          <IconButton
            color="primary"
            component="span"
            className="button"
            aria-label="Upload picture"
          >
            <Icon>photo_camera</Icon>
          </IconButton>
        </label>
      </SimpleCard>

      <Box py="12px" />

      <SimpleCard title="different size buttons">
        <Fab size="small" color="secondary" aria-label="Add" className="button">
          <Icon>add</Icon>
        </Fab>

        <Fab size="medium" color="secondary" aria-label="Add" className="button">
          <Icon>add</Icon>
        </Fab>

        <Fab color="secondary" aria-label="Add" className="button">
          <Icon>add</Icon>
        </Fab>
      </SimpleCard>

      <Box py="12px" />

      <SimpleCard title="outlined buttons">
        <Fab color="primary" aria-label="Add" className="button">
          <Icon>add</Icon>
        </Fab>

        <Fab color="secondary" aria-label="Edit" className="button">
          <Icon>edit_icon</Icon>
        </Fab>

        <Fab variant="extended" aria-label="Delete" className="button">
          <Icon sx={{ mr: 4 }}>navigation</Icon>
          Extended
        </Fab>

        <Fab disabled aria-label="Delete" className="button">
          <Icon>delete</Icon>
        </Fab>
      </SimpleCard>
    </AppButtonRoot>
  );
}