Adaptive Button

Adaptiveness

  • Android & iOS: native styling
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { AdaptiveButton } from "adaptive-material-ui/components/button";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveButton variant="contained">Button</AdaptiveButton>
    </AdaptiveModeDemo>
  );
}

Variations

Size
Start Icon
End Icon
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import DeleteIcon from "@mui/icons-material/Delete";
import { AdaptiveButton } from "adaptive-material-ui/components/button";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Size">
          <AdaptiveButton size="small" variant="contained">
            Small
          </AdaptiveButton>
          <AdaptiveButton size="medium" variant="contained">
            Medium
          </AdaptiveButton>
          <AdaptiveButton size="large" variant="contained">
            Large
          </AdaptiveButton>
          <AdaptiveButton size="x-large" variant="contained">
            X-Large
          </AdaptiveButton>
        </DemoListItem>
        <DemoListItem title="Start Icon">
          <AdaptiveButton
            size="small"
            variant="contained"
            startIcon={<DeleteIcon />}
          >
            Small
          </AdaptiveButton>
          <AdaptiveButton
            size="medium"
            variant="contained"
            startIcon={<DeleteIcon />}
          >
            Medium
          </AdaptiveButton>
          <AdaptiveButton
            size="large"
            variant="contained"
            startIcon={<DeleteIcon />}
          >
            Large
          </AdaptiveButton>
          <AdaptiveButton
            size="x-large"
            variant="contained"
            startIcon={<DeleteIcon />}
          >
            X-Large
          </AdaptiveButton>
        </DemoListItem>
        <DemoListItem title="End Icon">
          <AdaptiveButton
            size="small"
            variant="contained"
            endIcon={<DeleteIcon />}
          >
            Small
          </AdaptiveButton>
          <AdaptiveButton
            size="medium"
            variant="contained"
            endIcon={<DeleteIcon />}
          >
            Medium
          </AdaptiveButton>
          <AdaptiveButton
            size="large"
            variant="contained"
            endIcon={<DeleteIcon />}
          >
            Large
          </AdaptiveButton>
          <AdaptiveButton
            size="x-large"
            variant="contained"
            endIcon={<DeleteIcon />}
          >
            X-Large
          </AdaptiveButton>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}

Round

The round property can be used to make the button rounded on all devices. To apply it to only specific devices you can use the useAdaptiveMode hook.

Variant
Size
Group
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import ButtonGroup from "@mui/material/ButtonGroup";
import { AdaptiveButton } from "adaptive-material-ui/components/button";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Variant">
          <AdaptiveButton round variant="contained">
            Contained
          </AdaptiveButton>
          <AdaptiveButton round variant="outlined">
            Outlined
          </AdaptiveButton>
          <AdaptiveButton round variant="text">
            Text
          </AdaptiveButton>
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveButton round size="small" variant="contained">
            Small
          </AdaptiveButton>
          <AdaptiveButton round size="medium" variant="contained">
            Medium
          </AdaptiveButton>
          <AdaptiveButton round size="large" variant="contained">
            Large
          </AdaptiveButton>
          <AdaptiveButton round size="x-large" variant="contained">
            X-Large
          </AdaptiveButton>
        </DemoListItem>
        <DemoListItem title="Group">
          <ButtonGroup variant="contained">
            <AdaptiveButton round>One</AdaptiveButton>
            <AdaptiveButton round>Two</AdaptiveButton>
            <AdaptiveButton round>Three</AdaptiveButton>
          </ButtonGroup>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}

Icon Button

Adaptiveness

  • Android & iOS: native styling
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import DeleteIcon from "@mui/icons-material/Delete";
import { AdaptiveIconButton } from "adaptive-material-ui/components/iconButton";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveIconButton aria-label="delete">
        <DeleteIcon />
      </AdaptiveIconButton>
    </AdaptiveModeDemo>
  );
}

Variations

Size
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import { AdaptiveIconButton } from "adaptive-material-ui/components/iconButton";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Size">
          <AdaptiveIconButton size="small">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="medium">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="large">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="x-large">
            <PlayArrowIcon />
          </AdaptiveIconButton>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}

Variant

The variant="contained" prop can be used to add a background to the button on all devices. To apply it to only specific devices you can use the useAdaptiveMode hook.

Color
Size
import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import { AdaptiveIconButton } from "adaptive-material-ui/components/iconButton";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveIconButton color="default" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="primary" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="secondary" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="error" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="info" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="success" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton color="warning" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveIconButton size="small" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="medium" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="large" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
          <AdaptiveIconButton size="x-large" variant="contained">
            <PlayArrowIcon />
          </AdaptiveIconButton>
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}

API

MUI Button API with the following changes:

  • The size prop also accepts a x-large value
  • iOS: disableTouchRipple defaults to true

round

Increases the border radius to make the button corners appear rounded

  • Type: boolean
  • Default: false

Icon Button

MUI Icon Button API with the following changes:

  • The size prop also accepts a x-large value
  • iOS: disableTouchRipple defaults to true

variant

Adds a background to the button when set to contained

  • Type: "contained" | "default"
  • Default: "default"

Browser Compatibility