Installation

To install a component run

$ npm install @wallnit-ui/button-group --save

Please import CSS styles via

@import '/path__to__node_modules/@wallnit-ui/button-group/dist/index.min.css

Usage

Text Button:

import { ButtonGroup } from '@wallnit-ui/button-group';

initialState = {
  panes: ['First', 'Second', 'Third'],
  activeIndex: 0,
};

<ButtonGroup
  variant="text"
  panes={state.panes}
  activeIndex={state.activeIndex}
  onClick={(event) => {
    setState({
      activeIndex: event.key,
    });
  }}
/>

Outlined Button:

import { ButtonGroup } from '@wallnit-ui/button-group';

initialState = {
  panes: ['First', 'Second', 'Third'],
  activeIndex: 0,
};

<ButtonGroup
  variant="outlined"
  panes={state.panes}
  activeIndex={state.activeIndex}
  onClick={(event) => {
    setState({
      activeIndex: event.key,
    });
  }}
/>

Contained Button:

import { ButtonGroup } from '@wallnit-ui/button-group';

initialState = {
  panes: ['First', 'Second', 'Third'],
  activeIndex: 0,
};

<ButtonGroup
  panes={state.panes}
  activeIndex={state.activeIndex}
  onClick={(event) => {
    setState({
      activeIndex: event.key,
    });
  }}
/>