@slup/buttons v0.5.1

This package contains the Buttons, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/buttons

Usage

import {
  RaisedButton,
  FlatButton,
  Fab,
  IconButton
} from '@slup/buttons'

export const Buttons = () =>
  <div>
    <RaisedButton>Button</RaisedButton>
    <FlatButton>Button</FlatButton>
    <Fab>+</Fab>
    <IconButton>+</IconButton>
  </div>

Available properties

Property: 'disabled'

This property will disable the button

<RaisedButton disabled>Button</RaisedButton>
<FlatButton disabled>Button</FlatButton>
<Fab disabled>+</Fab>
<IconButton disabled>+</IconButton>

Property: 'ripple' RaisedButton, FlatButton, Fab

This property if set to false will remove the Ripple effect

<RaisedButton ripple={false}>Button</RaisedButton>
<FlatButton ripple={false}>Button</FlatButton>
<Fab ripple={false}>+</Fab>

Property: 'secondary' RaisedButton, Fab, IconButton

It will set the background to the 'secondary' color of the theme for the RaisedButton and the Fab. It will only change the color for the IconButton

<RaisedButton secondary>Button</RaisedButton>
<Fab secondary>+</Fab>
<IconButton secondary>+</IconButton>

Property: 'primary' RaisedButton, FlatButton, IconButton

It will set the background to the 'primary' color of the theme for the RaisedButton. It will set the color to the 'primary' primary color of the theme for the FlatButton and IconButton

<RaisedButton primary>Button</RaisedButton>
<FlatButton primary>Button</FlatButton>
<IconButton primary>+</IconButton>

Property: 'mini' Fab

It will reduce its size

<Fab mini>+</Fab>

Property: 'centerRipple' IconButton

This property if set to false will make the ripple appear on the clicked position instead of starting from the center

<IconButton centerRipple={false}>+</IconButton>