Top
Button API - API
Button API
Props (14)
Callback Props (4)
Styling Props (12)
Methods (3)
Below you can find a list of public props that the <Button /> supports. Besides this list, the component also supports all standard DOM attributes - those are not explicitly mentioned here, with a few exceptions.
String
default: "center"
Controls the horizontal alignment for the <Button />.
This works in combination with rtl.
Possible values:
  • "start" - when rtl is false, aligns the button text to the left, otherwise to the right.
  • "center" - aligns the button text horizontally centered
  • "end" - when rtl is false, aligns the button text to the right, otherwise to the left.
This prop also adds a CSS className with the specific value it holds to the button: zippy-react-toolkit-button--align-[VALUE]
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const dataSource = ['start', 'center', 'end', 'right', 'left'].map((align) => {
  return {
    label: align,
    value: align
  }
})

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { align: 'left', rtl: false }
    }
    render() {
      return <div>
        <div style={{ marginBottom: 20 }}>
          Button align:
          <RadioButtonGroup
            radioOptions={dataSource}
            radioValue={this.state.align}
            onChange={({ checkedItemValue: align}) => this.setState({ align })}
          />
        </div>
        <div style={{ marginBottom: 20 }}>
          <CheckBox checked={this.state.rtl}
            onChange={(rtl) => {
              this.setState({
                rtl
              })
            }}
          >
            Right-to-left
          </CheckBox>
        </div>
        <Button
          align={this.state.align}
          style={{width: 200}}
          rtl={this.state.rtl}
        >
          Aligned to {this.state.align}
        </Button>
      </div>
    }
  }
  export default () => <App />
React.Node
default: undefined
The contents rendered inside the <Button />. You can explicitly use the children prop or just put things between <Button /> start/end tags.
<Button>Save as</Button>
// or
<Button children="Save as" />
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button>Save as</Button>
Bool
default: undefined
Uncontrolled version of pressed.
Use onToggle(pressed) to be notified of when the button is toggled.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <div>
  <p>
    Pressing the button changes the text style to bold.
  </p>
  <div>
    <Button
      defaultPressed
      pressedStyle={{fontWeight: 'bold'}}
    >
      Default pressed button
    </Button>
  </div>
</div>
Bool
default: false
Whether to render the <Button /> as disabled or not.
When this is true, onClick is not called.
Setting this prop to true, adds the zippy-react-toolkit-button--disabled CSS className.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const onClick = () => {
  //this code is not executed when disabled
  console.error('Executing from disabled button')
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      disabled: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.disabled}
          onChange={(disabled) => this.setState({ disabled })}
        >
          Disable
        </CheckBox>
      </div>
      <Button
        disabled={this.state.disabled}
        onClick={onClick}
      >
        Export to PDF
      </Button>
    </div>
  }
}

export default () => <App />
Bool
default: true
By default, ellipsis will be displayed when the button text does not fit in the button. If this is false, the text will wrap.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

const exportAction = () => {
  zippy.notification.first.addNotification({
      title: 'Event',
      content: <p>Export content as PDF - clicked</p>
    });
  }

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showEllipsis: true,
      wrap: true,
      hidden: false
    }
  }

  render() {
    const style = { padding: 10, maxWidth: 100 }
    if (this.state.hidden) {
      style.overflow = 'hidden'
    }

    return <div>
      <NotificationBoard
        offset={{top:6, right: 20}}
        style={{marginTop: 60}}
        id="first"
      />
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.showEllipsis}
          onChange={(showEllipsis) => {
            this.setState({
              showEllipsis
            })
          }}
        >Show ellipsis
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.wrap}
          onChange={(wrap) => {
            this.setState({
              wrap
            })
          }}
        >Wrap contents
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.hidden}
          onChange={(hidden) => {
            this.setState({
              hidden
            })
          }}
        >Overflow: hidden
        </CheckBox>
      </div>

      <Button
        align="start"
        style={style}
        onClick={exportAction}
        ellipsis={this.state.showEllipsis}
        wrap={this.state.wrap}
      >
        Export content as PDF
      </Button>
    </div>
  }
}

export default () => <App />
String
default: undefined
A href to navigate to when the <Button /> is clicked. If specified, this will ignore tagName and will render an anchor tag instead of the specified tagName.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  href="http://reactjs.com"
  target="_blank"
  rel="noopener nofollow"
  style={{ padding: 5 }}
>
  ReactJS Website Link
</Button>
Function|React.Node
default: undefined
Specifies the icon to render inside the <Button />. Icon position is controlled by iconPosition.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import reactLogoIcon from './reactLogoIcon'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showIcon: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.showIcon}
          onChange={(showIcon) => {
            this.setState({
              showIcon
            })
          }}
        >Show icon
        </CheckBox>
      </div>
      <Button
        icon={this.state.showIcon ? reactLogoIcon : null}
      >
        <span style={{ padding: 5}}>
          ReactJS Logo
        </span>
      </Button>
    </div>
  }
}

export default () => <App />
String
default: "left"
Specifies the position where to render the icon.
Possible values:
  • "left"
  • "right"
  • "start" - for rtl true, this means "right"
  • "end" - for rtl true, this means "left"
  • "top"
  • "bottom"
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import reactLogoIcon from './reactLogoIcon'

const dataSource = [
  'start',
  'end',
  'top',
  'bottom'
].map(value => {
  return { id: value, label: value }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      iconPosition: 'start',
      showIcon: true
    }
  }

  render() {
    return <div>
      <div style={{ marginTop: 20}}>
        Icon position:
        <ComboBox
          style={{ width: 200, marginLeft: 20 }}
          inlineFlex
          collapseOnSelect
          clearIcon={null}
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.iconPosition}
          onChange={(iconPosition) => this.setState({ iconPosition })}
        />
      </div>
      <div style={{ marginTop: 20, marginBottom: 20}}>
        <CheckBox
          checked={this.state.showIcon}
          onChange={(showIcon) => {
            this.setState({
              showIcon
            })
          }}
        >Show icon
        </CheckBox>
      </div>
       <Button
        icon={this.state.showIcon ? reactLogoIcon : null}
        iconPosition={this.state.iconPosition}
      >
        <span style={{ padding: 5}}>
          ReactJS Logo
        </span>
      </Button>
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Controls the overflow of content outside the <Button />.
If the <Button /> is not explicitly sized, it will adjust to fit its contents.
However, when it is given a size, either explicitly or through browser layout, content can go beyond the limits of the <Button />, so overflow controls if it gets cut off or remains visible.
When this property is not specified, browsers will apply the default overflow: visible and allow content to be visible outside the <Button />.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

const exportAction = () => {
  zippy.notification.first.addNotification({
      title: 'Event',
      content: <p>Export content as PDF - clicked</p>
    });
  }

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showEllipsis: true,
      wrap: true,
      hidden: false
    }
  }

  render() {
    const style = { padding: 10, maxWidth: 100 }
    if (this.state.hidden) {
      style.overflow = 'hidden'
    }

    return <div>
      <NotificationBoard
        offset={{top:6, right: 20}}
        style={{marginTop: 60}}
        id="first"
      />
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.showEllipsis}
          onChange={(showEllipsis) => {
            this.setState({
              showEllipsis
            })
          }}
        >Show ellipsis
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.wrap}
          onChange={(wrap) => {
            this.setState({
              wrap
            })
          }}
        >Wrap contents
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.hidden}
          onChange={(hidden) => {
            this.setState({
              hidden
            })
          }}
        >Overflow: hidden
        </CheckBox>
      </div>

      <Button
        align="start"
        style={{ padding: 10, maxWidth: 100 }}
        overflow={!this.state.hidden}
        onClick={exportAction}
        ellipsis={this.state.showEllipsis}
        wrap={this.state.wrap}
      >
        Export content as PDF
      </Button>
    </div>
  }
}

export default () => <App />
Bool
default: undefined
If true, will render the <Button /> in pressed state. This is a controlled prop. For the uncontrolled version, see defaultPressed.
Use onToggle(pressed) to be notified of when the <Button /> is toggled.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = { pressed: false }
    }

    toggle(pressed) {
      this.setState({ pressed })
    }

    render() {
      return <div>
        <p>Button is now <b>{this.state.pressed ? 'pressed' : 'unpressed'}</b>.</p>
        <div>
        <Button
          pressed={this.state.pressed}
          onToggle={this.toggle.bind(this)}
          pressedStyle={{fontWeight: 'bold'}}
        >
          Click to toggle
        </Button>
        </div>
      </div>
    }
  }
  return <App />
}
Bool
default: false
Specifies if right-to-left is enabled or not. By default, rtl is not enabled.
This affects how align works.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

import reactLogoIcon from './reactLogoIcon'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      rtl: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({ rtl })}
        >
          Right-to-left
        </CheckBox>
      </div>
      <Button
        rtl={this.state.rtl}
        icon={reactLogoIcon}
        align="start"
      >
        RTL Button
      </Button>
    </div>
  }
}
export default () => <App />
Specifying rtl="true" also adds the zippy-react-toolkit-button--rtl CSS className.
String
default: undefined
Specifies the tagName to use for the underlying DOM element.
By default, an HTML <button /> is rendered (unless icon is specified or verticalAlign is not "middle") . Those exceptions are in place because <button /> html tags are not fully compatible with flexbox, so we're rendering a <div /> instead. See this post for details.
When href is specified, the <Button /> will render an anchor <a /> tag instead, ignoring the specifiedtagName.
If icon is specified, or verticalAlign has a value different than "middle", the tagName will default to "div". It will not default to a "button", since buttons are known to have issues with flex related CSS properties, as already noted above. So in order to avoid weird bugs and cross-browser issues, it's safer to default to "div" instead of button in those special cases.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  tagName="h1"
>
  Header Button
</Button>
String
default: "middle"
Specifies the vertical alignment for <Button /> contents.
Valid values are:
  • "middle" (or "center")
  • "top"
  • "bottom"
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'

const dataSource = ['middle', 'top', 'bottom'].map((align) => {
  return {
    label: align,
    value: align
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      verticalAlign: 'middle'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Vertical align:
        <RadioButtonGroup
          radioOptions={dataSource}
          radioValue={this.state.verticalAlign || 'middle'}
          onChange={({checkedItemValue: verticalAlign }) => this.setState({ verticalAlign })}
        />
      </div>
      <Button
        verticalAlign={this.state.verticalAlign}
        style={{width: 200, height: 60}}
      >
        Vertical align: <b>{this.state.verticalAlign || 'middle'}</b>
      </Button>
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Valid values are true (will allow text wrapping) and false (will not allow text wrapping).
If not value is specified, and ellipsis is false, by default, browsers apply white-space: normal, so text gets wrapper.
If ellipsis is true, it will enforce this property be false, since in order to have ellipsis, the text doesn't need to wrap.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

const exportAction = () => {
  zippy.notification.first.addNotification({
      title: 'Event',
      content: <p>Export content as PDF - clicked</p>
    });
  }

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showEllipsis: true,
      wrap: true,
      hidden: false
    }
  }

  render() {
    const style = { padding: 10, maxWidth: 100 }
    if (this.state.hidden) {
      style.overflow = 'hidden'
    }

    return <div>
      <NotificationBoard
        offset={{top:6, right: 20}}
        style={{marginTop: 60}}
        id="first"
      />
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.showEllipsis}
          onChange={(showEllipsis) => {
            this.setState({
              showEllipsis
            })
          }}
        >Show ellipsis
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.wrap}
          onChange={(wrap) => {
            this.setState({
              wrap
            })
          }}
        >Wrap contents
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.hidden}
          onChange={(hidden) => {
            this.setState({
              hidden
            })
          }}
        >Overflow: hidden
        </CheckBox>
      </div>

      <Button
        align="start"
        style={style}
        onClick={exportAction}
        ellipsis={this.state.showEllipsis}
        wrap={this.state.wrap}
      >
        Export content as PDF
      </Button>
    </div>
  }
}

export default () => <App />
Fn(event)
default: undefined
Called when mousedown happens on the <Button />.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

const onActivate = () => {
  zippy.notification.first.addNotification({
      content: 'onActivate'
    });
  }

export default () => <div>
  <Button
    onActivate={onActivate}
  >
    Export as ...
  </Button>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first"
  />
</div>
Fn(event)
default: undefined
The function to be called when the <Button /> is clicked.
This is not called when disabled is true.
By default the <Button /> component renders an HTML <button> tag, which is focusable and reachable with tab navigation.
As a result, the onClick function prop is also called when the <Button /> is focused and the user hits ENTER.
This function is called with the React event object. See React events.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <Button onClick={() => zippy.notification.first.addNotification({ content: 'onClick'})}>
    Show notification
  </Button>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first"
  />
</div>
Fn(event)
default: undefined
Called when mouseup happens on the button.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

const onDeactivate = () => {
  zippy.notification.first.addNotification({
      content: 'onDeactivate'
    });
  }

export default () => <div>
  <Button
    onDeactivate={onDeactivate}
  >
    Export as ...
  </Button>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first"
  />
</div>
Fn(pressed: Bool)
default: undefined
Called before onClick, so you can change the value of the controlled pressed prop.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = { pressed: false }
    }

    toggle(pressed) {
      this.setState({ pressed })
    }

    render() {
      return <div>
        <p>Button is now <b>{this.state.pressed ? 'pressed' : 'unpressed'}</b>.</p>
        <div>
        <Button
          pressed={this.state.pressed}
          onToggle={this.toggle.bind(this)}
          pressedStyle={{fontWeight: 'bold'}}
        >
          Click to toggle
        </Button>
        </div>
      </div>
    }
  }
  return <App />
}
String
default: undefined
A CSS className to be applied to the <Button />, when it is active (between mousedown and mouseup).
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  // only applied when focused
  activeClassName="button-color-red-only-applied-when-active"

  // always applied
  className="always-applied"
>
  Active color is red
</Button>
Object
default: undefined
A style object to be applied to the <Button />, when it is active (between mousedown and mouseup).
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  // only applied when active
  activeStyle={{ color: 'red' }}

  // always applied
  style={{background: '#d3d3d3' }}
>
  Red button when active
</Button>
String
default: undefined
A className to be applied to the <Button />. The passed value is appended to other classNames that the <Button /> adds by default.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  className="button-extra-class-name"
>
  Button with border-radius: 3px
</Button>
String
default: undefined
A CSS className to be applied to the <Button />, when disabled is true.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  disabled
  className="this-is-also-applied"
  disabledClassName="button-color-gray-disabled-button-extra-class-name"
>
  Disabled button with className
</Button>
Object
default: undefined
A style object to be applied to the <Button />, when disabled is true.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  disabled={true}
  disabledStyle={{ color: 'gray' }}
>
  Disabled button
</Button>
String
default: undefined
A CSS className to be applied to the <Button /> when it has focus.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  // only applied when focused
  focusedClassName="button-color-blue-only-applied-when-focused"

  // always applied
  className="always-applied"
>
  Focused color is blue
</Button>
Object
default: undefined
A style object to be applied to the <Button /> when it has focus.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  // only applied when focused
  focusedStyle={{ color: 'blue' }}

  // always applied
  style={{background: '#d3d3d3' }}
>
  Blue button when focused
</Button>
String
default: undefined
A CSS className to be applied to the Button />, when the mouse is over the component.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  overClassName="button-color-green-only-applied-on-mouse-over"
  className="always-applied"
>
  Green button when hovered
</Button>
Object
default: undefined
A style object to be applied to the Button />, when the mouse is over the component.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  overStyle={{ color: 'green' }}
>
  Green text on mouse over
</Button>
String
default: undefined
A CSS className to be applied to the <Button /> when it is pressed.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  defaultPressed

  // only applied when pressed
  pressedClassName="button-red-text-only-applied-when-pressed"

  // always applied
  className="always-applied"
>
  Button with custom classNames
</Button>
Object
default: undefined
A style object to be applied to the <Button /> when it is pressed.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <Button
      defaultPressed

      // only applied when pressed
      pressedStyle={{ color: 'red'}}

      // always applied
      style={{ background: '#d3d3d3' }}
    >
      Red text when pressed
    </Button>
  }
}

export default () => <App />
Object
default: undefined
A style object to be applied to the <Button />.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <Button
  style={{ borderRadius: 3 }}
>
  Button with border radius
</Button>
Fn()
undefined
Checks whether the <Button /> is currently focused or not.
Fn()
Bool
Checks whether the <Button /> is currently pressed or not.
Fn()
undefined
For toggle buttons (buttons with pressed or defaultPressed). It programmatically toggles button state.
import React from 'react'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { defaultPressed: true }
    }
    render() {
      return <div>
      <div>
      <button
      onClick={() => { this.btn.toggle() }}
      >
      You can also click this to toggle
      </button>
      </div>
      <div style={{marginTop: 20}}>
        <Button
          defaultPressed
          pressedStyle={{ color: 'red' }}
          ref={(btn) => {
            this.btn = btn
          }}
        >
          Toggle button
        </Button>
      </div>
      </div>
    }
  }
  return <App />
}