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.

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.

GHOST BUTTONS

material react ui ghost outlined buttons
Also known as Outlined buttons. Best usage as secondary action together with priority 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.

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.

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.

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.

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.
Component "Button"
Props array: [ shape, view, color]

Possible button props:
- shape: def, square, action, fab, icon;
- view: main, smooth, ghost, raised, icon-bar;
- colors: blue (default), red, green, yellow, dark;

Usage examples:
import Button from './components/button/btn.jsx';

  <Button mdc_style={["square", "raised", "green"]}>
    <Add />
    Create
  </Button>

  <Button mdc_style={["icon", "icon-bar", "yellow"]}>
    <Close />
  </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.
Component "FAB button with badge"
Props array: [view, button_color, badge_color, badge_value]

Possible button props:
- view: main, smooth, ghost, raised;
- colors: blue (default), red, green, yellow, dark;

Possible badges colors:
- blue (default), red, green, yellow, dark, d-dark (deep dark);

Usage example:
import { FabBadge } from './components/button/btn.jsx';

<FabBadge mdc_style={["main", "red", "green", "33"]}>
   <Add />
</FabBadge>

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.
Component "Counter"
Array of prop mdc_style: [shape, view, left_btn_color, right_btn_color]

Possible props:
- shape: fab, square
- view: main, smooth, ghost, raised, raised-icon, outlined, icon-bar, icon-gray
- color: red, green, yellow, dark or null (default)

Component props:
- mdc_icons_left - contains left button icon
- mdc_icons_right - contains right button icon
- value - count
- vertical (bool) - true/false vertical position of a counter

Usage example:
import Counter from './components/counter/counter.jsx';
import {Add, Remove } from "@material-ui/icons"; 

 <Counter
    mdc_style={["fab", "raised-icon", "red", "green"]}
    mdc_icons_left={<Add />}
    mdc_icons_right={<Remove />}
    value="12"
 />

<Counter
    vertical="true"
    mdc_style={["square", "ghost", "yellow", "dark"]}
    mdc_icons_left={<Add />}
    mdc_icons_right={<Remove />}
    value="10"
/>