Top
ButtonGroup API - API
ButtonGroup API
Props (4)
Callback Props (2)
Styling Props (4)
Number
default: 0
Specifies which Button is initially pressed.
For controlled behaviour, see pressedIndex.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <ButtonGroup
  defaultPressedIndex={1}
>
  <Button>italic</Button>
  <Button>normal</Button>
  <Button>bold</Button>
</ButtonGroup>
Bool
default: true
Whether one button should always have pressed state.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

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

    this.state = {
      keepOnePressed: true
    }
  }

  render() {
    return <div>
      <div>
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.keepOnePressed}
            onChange={(keepOnePressed) => this.setState({ keepOnePressed })}
          >
            Keep one pressed
          </CheckBox>
        </div>
        <ButtonGroup keepOnePressed={this.state.keepOnePressed}>
          <Button>italic</Button>
          <Button>normal</Button>
          <Button>bold</Button>
        </ButtonGroup>
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
Specifies which Button is pressed. To react to pressedIndex change see onPressedIndexChange.
For uncontrolled behaviour, see defaultPressedIndex.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { pressed: null }
  }
  render() {
    return <div>
      <p>The pressed index is: {this.state.pressed}</p>
      <ButtonGroup
        pressedIndex={this.state.pressed}
        onPressedIndexChange={(index) => this.setState({ pressed: index })}
      >
        <Button>italic</Button>
        <Button>normal</Button>
        <Button>bold</Button>
      </ButtonGroup>
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to use direction: rtl.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

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>
      <div>
        <ButtonGroup rtl={this.state.rtl}>
        <Button>italic</Button>
          <Button>normal</Button>
          <Button>bold</Button>
        </ButtonGroup>
      </div>
    </div>
  }
}

export default () => <App />
Fn({ event, index, buttonProps })
default: undefined
Called when a Button is clicked.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => <div>
  <ButtonGroup
    onClick={({ event, index, buttonProps}) => {
      zippy.notification.first.addNotification({ title: "onClick", content: 'The ButtonGroup is pressed at index ' + index + '!' })
    }}
  >
    <Button>italic</Button>
    <Button>normal</Button>
    <Button>bold</Button>
  </ButtonGroup>
  <NotificationBoard
    offset={{top:6, right: 20}}
    style={{marginTop: 60}}
    id="first" />
</div>
Fn(index)
default: undefined
Called when pressedIndex changes.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { pressedIndex: null }
  }
  render() {
    return <div>
      <ButtonGroup
        pressedIndex={this.state.pressedIndex}
        onPressedIndexChange={(index) => {
          this.setState({ pressedIndex: index })
          zippy.notification.first.addNotification({
            title: 'onPressedIndexChange',
            content: 'Pressed index changed to: ' + index
          })
        }}
      >
        <Button>italic</Button>
        <Button>normal</Button>
        <Button>bold</Button>
      </ButtonGroup>
      <NotificationBoard
        offset={{top:6, right: 20}}
        style={{marginTop: 60}}
        id="first" />
    </div>
  }
}

export default () => <App />
String
default: undefined
Inline border added on component body.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

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

    this.state = {
      customBorder: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.customBorder}
          onChange={(customBorder) => this.setState({ customBorder })}
        >
          Show custom border
        </CheckBox>
      </div>
      <div>
        <ButtonGroup
          border={this.state.customBorder ? '1px solid #e9580a' : '1px solid #1976D2'}
        >
          <Button>italic</Button>
          <Button>normal</Button>
          <Button>bold</Button>
        </ButtonGroup>
      </div>
    </div>
  }
}

export default () => <App />
Number|String
default: 3
Inline border radius added on component body.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      borderRadius: null
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Custom border-radius:{' '}
        <NumericInput
          style={{ width: 70 }}
          minValue={0}
          maxValue={20}
          value={this.state.borderRadius}
          onChange={(borderRadius) => this.setState({ borderRadius })}
        />
      </div>
      <ButtonGroup borderRadius={this.state.borderRadius}>
        <Button>italic</Button>
        <Button>normal</Button>
        <Button>bold</Button>
      </ButtonGroup>
    </div>
  }
}
export default () => <App />
String
default: undefined
A className to be applied to the <ButtonGroup />. The passed value is appended to other classNames that the <ButtonGroup /> adds by default.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'

import './index.global.css'

export default () => <ButtonGroup
  className="button-group-custom-class"
>
  <Button>italic</Button>
  <Button>normal</Button>
  <Button>bold</Button>
</ButtonGroup>
Object
default: undefined
A style object to be applied to the <ButtonGroup />.
import React from 'react'
import ButtonGroup from '@zippytech/react-toolkit/ButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/ButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <ButtonGroup
  style={{ width: 300, height: 50 }}
>
  <Button>italic</Button>
  <Button>normal</Button>
  <Button>bold</Button>
</ButtonGroup>