button

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