Button

Button is a UI component in React that provides an <button> functional with extra power.

Import

import {Button} from 'frontik/react/Button'

Usage

Basic Button

<Button>Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

Disabled Button

<Button disabled >Text</Button>
<Button disabled variant="contained">Contained</Button>
<Button disabled variant="outlined">Outlined</Button>

Loading Button

Loading State

<Button loading >Text</Button>
<Button loading variant="contained">Contained</Button>
<Button loading variant="outlined">Outlined</Button>

Loading Indicator

<Button loading loadingIndicator="Loading...">Click me!</Button>
<Button loading loadingIndicator={<div>⏳</div>}>Click me!</Button>

Loading Position

<Button loading loadingPosition='start' startIcon='start' variant='contained'>Click me!</Button>
<Button loading loadingPosition='end' endIcon='end' variant='contained'>Click me!</Button>
<Button loading loadingPosition='center' variant='contained'>Click me!</Button>

Button colors

Text

    <Button color='primary'>Primary</Button>
    <Button color='secondary'>Secondary</Button>
    <Button color='success'>Success</Button>
    <Button color='error'>Error</Button>
    <Button color='info'>Info</Button>
    <Button color='warning'>Warning</Button>

Contained

    <Button variant='contained' color='primary'>Primary</Button>
    <Button variant='contained' color='secondary'>Secondary</Button>
    <Button variant='contained' color='success'>Success</Button>
    <Button variant='contained' color='error'>Error</Button>
    <Button variant='contained' color='info'>Info</Button>
    <Button variant='contained' color='warning'>Warning</Button>

Outlined

    <Button variant='outlined' color='primary'>Primary</Button>
    <Button variant='outlined' color='secondary'>Secondary</Button>
    <Button variant='outlined' color='success'>Success</Button>
    <Button variant='outlined' color='error'>Error</Button>
    <Button variant='outlined' color='info'>Info</Button>
    <Button variant='outlined' color='warning'>Warning</Button>

Text

Contained

Outlined

Button sizes

<Button variant='outlined' size='small'>Primary</Button>
<Button variant='outlined' size='medium'>Secondary</Button>
<Button variant='outlined' size='large'>Success</Button>

API

Name	Type	Values	Default	Description
disabled	Boolean	true/false	false	Makes button state disabled/enabled
loading	Boolean	true/false	false	Change button loading state
size	String	"small", "medium", "large"	"medium"	The more common sizes of the button.
color	String	"primary", "secondary", "success", "error", "info", "warning"	"primary"	The color of the button. It supports both default and custom theme colors
className	String			Override or extend the styles applied to the button.
children	node			The content of the button.
loadingIndicator	node		<CircularProgress>	Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name.
loadingPosition	String	"start", "end", "center"	"center"	The loading indicator can be positioned in the button.
endIcon	node			Element placed after children
startIcon	node			Element placed before children
variant	String	"outlined", "text", "contained"	"text"	Three common variants for button, any of which you can customize with overriding classnames

Customization With CSS / SCSS

• ClassName
  • You can override the style of the button using your own classname with selecting and overriding MaterialUi v5 default classnames. More about of default classnames you can know folow this link https://mui.com/material-ui/api/button/#css.
  • Also you can use other variants of styles customization provided by MaterialUi v5. More about styles customization systems in MaterialUi v5 you can know folow this link https://mui.com/material-ui/customization/how-to-customize/