@hawk-ui/button-group NPM | npm.io

4.4.1 • Published 11 months ago

Install

Weekly downloads

537

License

MIT

Repository

Last release

11 months ago

Installation

To install a component run

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

Please import CSS styles via

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

Usage

Text Button:

import ButtonGroup from '@hawk-ui/button-group';

initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

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

Outlined Button:

import ButtonGroup from '@hawk-ui/button-group';

initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

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

Contained Button:

import ButtonGroup from '@hawk-ui/button-group';

initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

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

button group react react component react button group hawk hawk-ui ui

@hawk-ui/button classnames lodash prop-types

@everything-registry/sub-chunk-388 @hawk-ui/form

11 months ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago