Kolay Asistan
Eczacı mısınız?
Contained

Use variant='contained' prop with <Button> component for contained buttons.

Link
// ** MUI Imports
import Button from '@mui/material/Button'

const ButtonsContained = () => {
  return (
    <div className='demo-space-x'>
      <Button variant='contained'>Primary</Button>
      <Button variant='contained' color='secondary'>
        Secondary
      </Button>
      <Button variant='contained' disabled>
        Disabled
      </Button>
      <Button variant='contained' href='#'>
        Link
      </Button>
    </div>
  )
}

export default ButtonsContained
Text

Use variant='text' prop with <Button> component for buttons with text only.

Link
// ** MUI Imports
import Button from '@mui/material/Button'

const ButtonsText = () => {
  return (
    <div className='demo-space-x'>
      <Button variant='text'>Primary</Button>
      <Button variant='text' color='secondary'>
        Secondary
      </Button>
      <Button variant='text' disabled>
        Disabled
      </Button>
      <Button variant='text' href='#'>
        Link
      </Button>
    </div>
  )
}

export default ButtonsText
Outlined

Use variant='outlined' prop with <Button> component for outlined buttons.

Link
// ** MUI Imports
import Button from '@mui/material/Button'

const ButtonsOutlined = () => {
  return (
    <div className='demo-space-x'>
      <Button variant='outlined'>Primary</Button>
      <Button variant='outlined' color='secondary'>
        Secondary
      </Button>
      <Button variant='outlined' disabled>
        Disabled
      </Button>
      <Button variant='outlined' href='#'>
        Link
      </Button>
    </div>
  )
}

export default ButtonsOutlined
Tonal

Use variant='tonal' prop with <Button> component for tonal buttons.

Link
// ** MUI Imports
import Button from '@mui/material/Button'

const ButtonsTonal = () => {
  return (
    <div className='demo-space-x'>
      <Button variant='tonal'>Primary</Button>
      <Button variant='tonal' color='secondary'>
        Secondary
      </Button>
      <Button variant='tonal' disabled>
        Disabled
      </Button>
      <Button variant='tonal' href='#'>
        Link
      </Button>
    </div>
  )
}

export default ButtonsTonal
Buttons With Icon and Label

Use startIcon | endIcon prop with <Button> component to add an icon inside a button.

// ** MUI Imports
import Button from '@mui/material/Button'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ButtonsWithIconAndLabel = () => {
  return (
    <div className='demo-space-x'>
      <Button variant='contained' endIcon={<Icon icon='tabler:send' />}>
        Send
      </Button>
      <Button variant='contained' color='secondary' startIcon={<Icon icon='tabler:trash' />}>
        Delete
      </Button>
    </div>
  )
}

export default ButtonsWithIconAndLabel
Icon Buttons

Use an icon component inside <IconButton> component. For different colors, use color prop with <IconButton> component.

// ** MUI Imports
import IconButton from '@mui/material/IconButton'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ButtonsIcons = () => {
  return (
    <div className='demo-space-x'>
      <IconButton aria-label='capture screenshot'>
        <Icon icon='tabler:aperture' />
      </IconButton>
      <IconButton aria-label='capture screenshot' color='primary'>
        <Icon icon='tabler:aperture' />
      </IconButton>
      <IconButton aria-label='capture screenshot' color='secondary'>
        <Icon icon='tabler:aperture' />
      </IconButton>
      <IconButton aria-label='capture screenshot' disabled>
        <Icon icon='tabler:aperture' />
      </IconButton>
    </div>
  )
}

export default ButtonsIcons
Button Sizes

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.

// ** React Imports
import { Fragment } from 'react'

// ** MUI Imports
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ButtonsSizes = () => {
  return (
    <Fragment>
      <div className='demo-space-x'>
        <Button variant='text' size='small'>
          Small
        </Button>
        <Button variant='text' size='medium'>
          Medium
        </Button>
        <Button variant='text' size='large'>
          Large
        </Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='outlined' size='small'>
          Small
        </Button>
        <Button variant='outlined' size='medium'>
          Medium
        </Button>
        <Button variant='outlined' size='large'>
          Large
        </Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='contained' size='small'>
          Small
        </Button>
        <Button variant='contained' size='medium'>
          Medium
        </Button>
        <Button variant='contained' size='large'>
          Large
        </Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='tonal' size='small'>
          Small
        </Button>
        <Button variant='tonal' size='medium'>
          Medium
        </Button>
        <Button variant='tonal' size='large'>
          Large
        </Button>
      </div>
      <div className='demo-space-x'>
        <IconButton aria-label='capture screenshot' color='secondary' size='small'>
          <Icon icon='tabler:aperture' fontSize='inherit' />
        </IconButton>
        <IconButton aria-label='capture screenshot' color='secondary'>
          <Icon icon='tabler:aperture' fontSize={20} />
        </IconButton>
        <IconButton aria-label='capture screenshot' color='secondary'>
          <Icon icon='tabler:aperture' />
        </IconButton>
        <IconButton aria-label='capture screenshot' color='secondary' size='large'>
          <Icon icon='tabler:aperture' fontSize={35} />
        </IconButton>
      </div>
    </Fragment>
  )
}

export default ButtonsSizes
Button Colors

Use color prop with <Button> component for different colored buttons.

// ** React Imports
import { Fragment } from 'react'

// ** MUI Imports
import Button from '@mui/material/Button'

const ButtonsColors = () => {
  return (
    <Fragment>
      <div className='demo-space-x'>
        <Button color='success'>Success</Button>
        <Button color='error'>Error</Button>
        <Button color='warning'>Warning</Button>
        <Button color='info'>Info</Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='outlined' color='success'>
          Success
        </Button>
        <Button variant='outlined' color='error'>
          Error
        </Button>
        <Button variant='outlined' color='warning'>
          Warning
        </Button>
        <Button variant='outlined' color='info'>
          Info
        </Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='contained' color='success'>
          Success
        </Button>
        <Button variant='contained' color='error'>
          Error
        </Button>
        <Button variant='contained' color='warning'>
          Warning
        </Button>
        <Button variant='contained' color='info'>
          Info
        </Button>
      </div>
      <div className='demo-space-x'>
        <Button variant='tonal' color='success'>
          Success
        </Button>
        <Button variant='tonal' color='error'>
          Error
        </Button>
        <Button variant='tonal' color='warning'>
          Warning
        </Button>
        <Button variant='tonal' color='info'>
          Info
        </Button>
      </div>
    </Fragment>
  )
}

export default ButtonsColors
Customized Buttons
// ** MUI Imports
import { brown } from '@mui/material/colors'
import { styled } from '@mui/material/styles'
import Button, { ButtonProps } from '@mui/material/Button'

// Styled component for a custom button
const CustomButton = styled(Button)<ButtonProps>(({ theme }) => ({
  backgroundColor: brown[500],
  color: theme.palette.getContrastText(brown[500]),
  '&:hover': {
    backgroundColor: brown[700]
  }
}))

// Styled component for a Bootstrap button
const BootstrapButton = styled(Button)({
  fontSize: 16,
  lineHeight: 1.5,
  boxShadow: 'none',
  border: '1px solid',
  padding: '6px 12px',
  textTransform: 'none',
  borderColor: '#0063cc',
  backgroundColor: '#0063cc',
  fontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"'
  ].join(','),
  '&:hover': {
    boxShadow: 'none',
    borderColor: '#0062cc',
    backgroundColor: '#0069d9'
  },
  '&:active': {
    boxShadow: 'none',
    borderColor: '#005cbf',
    backgroundColor: '#0062cc',
    transform: 'none !important'
  },
  '&:focus': {
    boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)'
  }
})

const ButtonsCustomized = () => {
  return (
    <div className='demo-space-x'>
      <CustomButton variant='contained'>Custom Color</CustomButton>
      <BootstrapButton variant='contained' disableRipple>
        Bootstrap
      </BootstrapButton>
    </div>
  )
}

export default ButtonsCustomized
Floating Action Button

Use color prop with <Fab> component for different colored Floating Action Button and variant='extended' prop for extended (not round) Floating Action Button.

Circular Variant

Extended Variant

// ** MUI Imports
import Box from '@mui/material/Box'
import Fab from '@mui/material/Fab'
import Typography from '@mui/material/Typography'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ButtonsFab = () => {
  return (
    <>
      <Typography sx={{ fontWeight: 500 }}>Circular Variant</Typography>
      <Box sx={{ mb: 6 }} className='demo-space-x'>
        <Fab aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='primary' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='secondary' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='success' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='error' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='warning' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab color='info' aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
        <Fab disabled aria-label='edit'>
          <Icon icon='tabler:pencil' />
        </Fab>
      </Box>
      <Typography sx={{ fontWeight: 500 }}>Extended Variant</Typography>
      <div className='demo-space-x'>
        <Fab variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='primary' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='secondary' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='success' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='error' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='warning' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab color='info' variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
        <Fab disabled variant='extended' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:plus' />
          Add
        </Fab>
      </div>
    </>
  )
}

export default ButtonsFab
Floating Action Button Sizes

Use size={'small' | 'medium' | 'large'} prop for different sizes of Floating Action Buttons.

// ** React Imports
import { Fragment } from 'react'

// ** MUI Imports
import Fab from '@mui/material/Fab'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ButtonsFabSizes = () => {
  return (
    <Fragment>
      <div className='demo-space-x'>
        <Fab color='primary' aria-label='add' size='small'>
          <Icon icon='tabler:plus' />
        </Fab>
        <Fab color='primary' aria-label='add' size='medium'>
          <Icon icon='tabler:plus' />
        </Fab>
        <Fab color='primary' aria-label='add' size='large'>
          <Icon icon='tabler:plus' />
        </Fab>
      </div>
      <div className='demo-space-x'>
        <Fab variant='extended' size='small' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:navigation' />
          Navigate
        </Fab>
        <Fab variant='extended' size='medium' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:navigation' />
          Navigate
        </Fab>
        <Fab variant='extended' size='large' sx={{ '& svg': { mr: 1 } }}>
          <Icon icon='tabler:navigation' />
          Navigate
        </Fab>
      </div>
    </Fragment>
  )
}

export default ButtonsFabSizes