// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import ButtonsFab from 'src/views/components/buttons/ButtonsFab' import ButtonsText from 'src/views/components/buttons/ButtonsText' import ButtonsIcons from 'src/views/components/buttons/ButtonsIcons' import ButtonsSizes from 'src/views/components/buttons/ButtonsSizes' import ButtonsColors from 'src/views/components/buttons/ButtonsColors' import ButtonsOutlined from 'src/views/components/buttons/ButtonsOutlined' import ButtonsFabSizes from 'src/views/components/buttons/ButtonsFabSizes' import ButtonsContained from 'src/views/components/buttons/ButtonsContained' import ButtonsCustomized from 'src/views/components/buttons/ButtonsCustomized' import ButtonsWithIconAndLabel from 'src/views/components/buttons/ButtonsWithIconAndLabel' // ** Source code imports import * as source from 'src/views/components/buttons/ButtonsSourceCode' const Buttons = () => { return ( Use variant='contained' prop with <Button> component for contained buttons. Use variant='text' prop with <Button> component for buttons with text only. Use variant='outlined' prop with <Button> component for outlined buttons. Use startIcon | endIcon prop with <Button> component to add an icon inside a button. Use an icon component inside <IconButton> component. For different colors, use{' '} color prop with <IconButton> component. Use size={`{'small' | 'medium' | 'large'}`} prop with <Button> component for different sized buttons. To use icon buttons, you need to use size={`{small | large}`} prop with <IconButton> component or you can also use fontSize prop with the icons. Use color prop with <Button> component for different colored buttons. Use color prop with <Fab> component for different colored Floating Action Button and variant='extended' prop for extended (not round) Floating Action Button. Use size={`{'small' | 'medium' | 'large'}`} prop for different sizes of Floating Action Buttons. ) } export default Buttons