Say Hello!
Send us your questions or customization on demand requests
We used to reply ASAP
Become an affiliate and earn up to 50%
You can participate in Setproduct partnership program and earn up to 50% from every sale you made
We used to reply ASAP
  • Reflexed shadows attached to every button according to the fill color. We use colored complexed elevation to make our objects feel like real
  • Solid colors for each button is declared. You can swap between 4 declared global colors to set the most convenient meaning for a Button: Action, Alternative, Warning, Danger, etc
  • Smart elevation provided within rethought onHover & onClick styles. Shadow grows while pointer is over and disappears when clicked.
  • Variety of styles available. Toggle between Filled, Smooth, Outline & Raised.

Buttons UI for React

FILLED BUTTONS

material react ui filled buttons
Default buttons to use in most of the cases. Customized with enhanced elevation, reflexed shadow fits to button fill.
Implementation for Filled Buttons
Available in styles:
.blueButton, .redButton, .greenButton, .yellowButton, .darkButton
import './components/assets/Button.css';
import Button from '@material-ui/core/Button';
...
<Button className="blueButton">blue</Button>

SMOOTH BUTTONS

material react ui custom buttons
Use this type of controls for default actions without priority. Smooth button gets elevated after a pointer hovered.
Implementation for Smooth Buttons
Available in styles:
.smoothBlueButton, .smoothRedButton, .smoothGreenButton, .smoothYellowButton, .smoothDarkButton
import './components/assets/Button.css';
import Button from '@material-ui/core/Button';
...
<Button className="smoothBlueButton">smooth</Button>

GHOST BUTTONS

material react ui ghost outlined buttons
Also known as Outlined buttons. Best usage as secondary action together with priority button.
Implementation for Ghost Buttons
Available in styles:
.ghostDarkButton, .ghostBlueButton, .ghostRedButton, .ghostGreenButton, .ghostYellowButton
import './components/assets/Button.css';
import Button from '@material-ui/core/Button';
...
<Button className="ghostGreenButton">ghost</Button>

RAISED BUTTONS

material react ui raised buttons
Light & Feather type of buttons, styled exclusively for Setproduct Material Theme. Fits for any action. Attracts an eye by reflexed elevation, especially when cursor is hovered.
Implementation for Raised Buttons
Available in styles:
.raisedBlueButton, .raisedRedButton, .raisedGreenButton, .raisedDarkButton, .raisedYellowButton
import './components/assets/Button.css';
import Button from '@material-ui/core/Button';
...
<Button className="raisedYellowButton">raised</Button>

ROUND BUTTONS (FAB)

material react ui raised buttons
Due to our design tasks, we wanted to have fewer impact buttons instead of default material FABs to use for navigation or toolbar headers, but still spheric. We expanded more styles for this sort and retouched it to look not so important.
Implementation for Floating Action Buttons
Available in styles:
.blueFAB, .redFAB, .greenFAB, .yellowFAB, .darkFAB,
.smoothBlueFAB, .smoothRedFAB, .smoothGreenFAB, .smoothYellowFAB, .smoothDarkFAB,
.ghostDarkFAB, .ghostBlueFAB, .ghostRedFAB, .ghostGreenFAB, .ghostYellowFAB,
.raisedBlueFAB, .raisedRedFAB, .raisedGreenFAB, .raisedDarkFAB, .raisedYellowFAB
import './components/assets/ButtonFAB.css';
import Button from '@material-ui/core/Button';
import { Add } from '@material-ui/icons';
...
<Button className="blueFAB"><Add/></Button>

NOTIFICATION BUTTONS

material react ui notification badge
Those buttons are ready to use for cases where's notification badge is required to visualize new events happening.
Implementation for Notification Buttons
Available in styles:
.blueBadge,.redBadge,.greenBadge,.yellowBadge,.darkBadge
import './components/assets/ButtonFAB.css';
import './components/assets/Badges.css';
import Button from '@material-ui/core/Button';
import Badge from './components/Badges.js';
import { Notifications } from '@material-ui/icons';
... 
<Badge className="yellowBadge" count='12'>
    <Button className="blueFAB">
        <Notifications/>
    </Button>
</Badge>

SQUARE BUTTONS

material react ui square button with caption
In some cases showing just an icon and the button body is not enough to explain the further action. We made a special button supported by a caption after an icon which explains more to a user. The longer caption you'll paste the more it looks like a rectangle. This sort of buttons fit perfect for a sidebar or navigation toolbar at the top, or even bottom of the screen.
Implementation for Square Buttons
Available in styles:
.blueSquare, .redSquare, .greenSquare, .yellowSquare, .darkSquare,
.smoothBlueSquare, .smoothRedSquare, .smoothGreenSquare, .smoothYellowSquare, .smoothDarkSquare,
.ghostDarkSquare, .ghostBlueSquare, .ghostRedSquare, .ghostGreenSquare, .ghostYellowSquare,
.raisedBlueSquare, .raisedRedSquare, .raisedGreenSquare, .raisedDarkSquare, .raisedYellowSquare
import './components/assets/ButtonSquare.css';
import Button from '@material-ui/core/Button';
import { Add } from '@material-ui/icons';
...
<Button className="blueSquare"><Add/>Create</Button>

ACTION BUTTONS

material react ui action buttons
This sort of buttons was inspired by the new Gmail Compose button. Styled with rounded corners, wide and could be placed as from Filled style for more priority or as Raised for mid-prior actions in your app. For example, Gmail interface contains only light and low elevated Action Button, despite composing a message is an extremely prior action in any email client.
Implementation for Action Buttons
Available in styles:
.blueAction, .redAction, .greenAction, .yellowAction, .darkAction,
.smoothBlueAction, .smoothRedAction, .smoothGreenAction, .smoothYellowAction, .smoothDarkAction,
.ghostDarkAction, .ghostBlueAction, .ghostRedAction, .ghostGreenAction, .ghostYellowAction,
.raisedBlueAction, .raisedRedAction, .raisedGreenAction, .raisedDarkAction, .raisedYellowAction
import './components/assets/ButtonAction.css';
import Button from '@material-ui/core/Button';
import { Add } from '@material-ui/icons';
...
<Button className="blueAction"><Add/><span>Create</span></Button>

COUNTERS, VOTERS

material react ui counter voter
We use such a component in order to change a value for any numeric parameter. For ecommerce apps, or up/downvoting posts.
Implementation for Counters & Voters
Available in styles:
.smooth, .raised, .outlined
.upward, .dropUp, .boldUp and base without style
import './components/assets/Counter.css';
import Counter from './components/Counter.js';
...
<Counter className="smooth" value="8" />

import Voter from './components/Voter.js';
...
<Voter className="upward" value="14"/>

ICON BUTTONS

material react ui icon button
Simple, frequent, colorful. Such UI items are used in most of the material-based interfaces. We performed some retouch to lift up this control while onHovered.
Implementation for Icon Buttons
Available in styles:
.blueIconClose, .redIconClose, .greenIconClose, .yellowIconClose, .darkIconClose
import './components/assets/IconClose.css';
import Button from '@material-ui/core/Button';
import { Close } from '@material-ui/icons';
...
<Button className="redIconClose"><Close/></Button>