Slup - Buttons

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:

Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
Flat buttons and raised buttons are the most commonly used types.
A floating action button is used for a promoted action.

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>