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';
// 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';
// 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';
// 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 { 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';
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, 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>);
}


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>
  );
}


import * as React from 'react';
import { Box, Button } from '@mui/material';
import { TbStar } from 'react-icons/tb';
// complex buttons
export default function ButtonComplex() {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 4,
        }}>
      <Button color='secondary' variant='outlined' size='small' startIcon={<TbStar />} endIcon={<Box component='span' sx={{
                bgcolor: 'gray.100',
                borderRadius: 99,
                px: 1,
                '&&&': {
                    fontWeight: 600,
                    fontSize: 'xs',
                },
            }}>
            33
          </Box>}>
        Star
      </Button>
      <Button color='secondary' variant='outlined' size='medium' startIcon={<TbStar />} endIcon={<Box component='span' sx={{
                bgcolor: 'gray.100',
                borderRadius: 99,
                px: 1,
                '&&&': {
                    fontWeight: 600,
                    fontSize: 'sm',
                },
            }}>
            33
          </Box>}>
        Star
      </Button>
      <Button color='secondary' variant='outlined' size='large' startIcon={<TbStar />} endIcon={<Box component='span' sx={{
                bgcolor: 'gray.100',
                borderRadius: 99,
                px: 1,
                '&&&': {
                    fontWeight: 600,
                    fontSize: 'md',
                },
            }}>
            33
          </Box>}>
        Star
      </Button>
    </Box>);
}


import * as React from 'react';
import { Box, Button } from '@mui/material';
import { TbStar } from 'react-icons/tb';
// complex buttons
export default function ButtonComplex() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 4,
      }}
    >
      <Button
        color='secondary'
        variant='outlined'
        size='small'
        startIcon={<TbStar />}
        endIcon={
          <Box
            component='span'
            sx={{
              bgcolor: 'gray.100',
              borderRadius: 99,
              px: 1,
              '&&&': {
                fontWeight: 600,
                fontSize: 'xs',
              },
            }}
          >
            33
          </Box>
        }
      >
        Star
      </Button>
      <Button
        color='secondary'
        variant='outlined'
        size='medium'
        startIcon={<TbStar />}
        endIcon={
          <Box
            component='span'
            sx={{
              bgcolor: 'gray.100',
              borderRadius: 99,
              px: 1,
              '&&&': {
                fontWeight: 600,
                fontSize: 'sm',
              },
            }}
          >
            33
          </Box>
        }
      >
        Star
      </Button>
      <Button
        color='secondary'
        variant='outlined'
        size='large'
        startIcon={<TbStar />}
        endIcon={
          <Box
            component='span'
            sx={{
              bgcolor: 'gray.100',
              borderRadius: 99,
              px: 1,
              '&&&': {
                fontWeight: 600,
                fontSize: 'md',
              },
            }}
          >
            33
          </Box>
        }
      >
        Star
      </Button>
    </Box>
  );
}


Buttons

Primary button

Secondary buttons

White buttons

Start icon buttons

End icon buttons

Round buttons

Icon buttons

Complex button