Skip to main content

Buttons

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Contained

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

Link


Text

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

Link


Outlined

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

Link


Buttons With Icon and Label

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



Icon Buttons

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



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.



Button Colors

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



Customized Buttons


Custom Icon Buttons

Use <CustomIconButton> component to use our custom icon button. You can use all the props of the <Button> component and additionally, we have added default color.

Sizes

Colors



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



Floating Action Button Sizes

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