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

| Props | Type | Default | Documentation | |---------------------|:-------------:|:-------------:|---------------------------------------------------------------------:| | disabled | boolean | false | Link | | ripple | boolean | true | Link | | secondary | boolean | false | Link | | primary | boolean | false | Link | | mini | boolean | false | Link | | centerRipple | boolean | true | Link |

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>