import * as React from "react"
import { Box, Button } from "@mui/material"
// primary buttons
export default function ButtonPrimary() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button color="primary" variant="contained" size="small">
        Button
      </Button>
      <Button color="primary" variant="contained" size="medium">
        Button
      </Button>
      <Button color="primary" variant="contained" size="large">
        Button
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, Button } from "@mui/material"
// secondary buttons
export default function ButtonSecondary() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button color="secondary" variant="contained" size="small">
        Button
      </Button>
      <Button color="secondary" variant="contained" size="medium">
        Button
      </Button>
      <Button color="secondary" variant="contained" size="large">
        Button
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, Button } from "@mui/material"
// white buttons
export default function ButtonWhite() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button color="secondary" variant="outlined" size="small">
        Button
      </Button>
      <Button color="secondary" variant="outlined" size="medium">
        Button
      </Button>
      <Button color="secondary" variant="outlined" size="large">
        Button
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, Button } from "@mui/material"
import { TbTrash } from "react-icons/tb"
// start icon buttons
export default function ButtonStartIcon() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button
        color="error"
        variant="contained"
        size="small"
        startIcon={<TbTrash />}
      >
        Delete
      </Button>
      <Button
        color="error"
        variant="contained"
        size="medium"
        startIcon={<TbTrash />}
      >
        Delete
      </Button>
      <Button
        color="error"
        variant="contained"
        size="large"
        startIcon={<TbTrash />}
      >
        Delete
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, Button } from "@mui/material"
import { TbArrowRight } from "react-icons/tb"
// end icon buttons
export default function ButtonEndIcon() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button
        color="primary"
        variant="contained"
        size="small"
        endIcon={<TbArrowRight />}
      >
        Get Started
      </Button>
      <Button
        color="primary"
        variant="contained"
        size="medium"
        endIcon={<TbArrowRight />}
      >
        Get Started
      </Button>
      <Button
        color="primary"
        variant="contained"
        size="large"
        endIcon={<TbArrowRight />}
      >
        Get Started
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, Button } from "@mui/material"
// round buttons
export default function ButtonRound() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <Button
        color="primary"
        variant="contained"
        size="small"
        sx={{
          borderRadius: 99,
        }}
      >
        Button
      </Button>
      <Button
        color="primary"
        variant="contained"
        size="medium"
        sx={{
          borderRadius: 99,
        }}
      >
        Button
      </Button>
      <Button
        color="primary"
        variant="contained"
        size="large"
        sx={{
          borderRadius: 99,
        }}
      >
        Button
      </Button>
    </Box>
  )
}


import * as React from "react"
import { Box, IconButton } from "@mui/material"
import { TbHeart, TbSend, TbTrash } from "react-icons/tb"
// icon buttons
export default function ButtonIcon() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
      }}
    >
      <IconButton color="primary" size="small">
        <TbHeart />
      </IconButton>
      <IconButton color="error" size="medium">
        <TbTrash />
      </IconButton>
      <IconButton color="secondary" size="large">
        <TbSend />
      </IconButton>
    </Box>
  )
}


Buttons

Primary button

Secondary buttons

White buttons

Start icon buttons

End icon buttons

Round buttons

Icon buttons

Complex button