Skip to content

vdux-components/button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

button

js-standard-style

Button container component

Installation

$ npm install vdux-button

Usage

This component follows the container/presentational component pattern as outlined by Dan Abramov here. This is a container component, and it holds state around buttons (in this case, just hover state), and orchestrates a few presentational components to generate a useful button abstraction.

Example:

import Button from 'vdux-button'

function render () {
  return (
    <Button tooltip="mystery button">
      Click Me!
    </Button>
  )
}

Using different presenters

If you want to use a different presentational button, you can pass that in the ui prop, e.g.

import {LogoButton} from 'vdux-ui'

function render () {
  return (
    <Button ui={LogoButton} tooltip='Login with Google' logo='images/google_plus.png'>
      Google Login
    </Button>
  )
}

API - props

  • ui - The presentational button component to use for rendering. Will receive all props not specifically destined somewhere else (e.g. tooltip).
  • ttUi - The tooltip presenter
  • highlight - Whether or not to highlight the button on hover. Defaults to true.
  • hoverStyle - Styles to add when the button is hovered. If enabled, overrides the true default of highlight.
  • tooltip - Tooltip message, shows up on hover
  • ttPlacement - Tooltip placement (e.g. top/right/bottom/left)
  • ttSpace - How far away the tooltip is from the button

License

MIT