npm package: @forter/button-group
Description: Button Group from Forter Components
Author: Forter Developers
Latest version: 1.7.5

# fc-button-group

A group of buttons
<!-- Author: assafmilman <assaf.milman@forter.com> -->

## Usage

```html
<script>
   import '@forter/button-group';
</script>

<fc-button-group>
      <button>Dog</button>
      <button>Cat</button>
      <button>Human <fc-icon icon="user" size="13"></fc-icon></button>
      <button>Fish</button>
</fc-button-group>
```

## Examples

```html

<!-- with 2 button buttons -->

<fc-button-group>
      <button>Dog</button>
      <button>Cat</button>
</fc-button-group>

<!-- with active and disabled buttons -->

<fc-button-group>
      <button>Dog</button>
      <button active>Cat</button>
      <button>Human <fc-icon icon="user" size="13"></fc-icon></button>
      <button disabled>Fish</button>
</fc-button-group>

<!-- disabled group and selected item -->

<fc-button-group disabled>
      <button>Dog</button>
      <button active>Cat</button>
      <button>Human</button>
      <button>Fish</button>
</fc-button-group>

<!-- all items disabled and one active -->

<fc-button-group>
      <button disabled>Dog</button>
      <button disabled active>Cat</button>
      <button disabled>Human</button>
      <button disabled>Fish</button>
</fc-button-group>

<!-- single-selection -->

<fc-button-group single-selection >
      <button>Dog</button>
      <button active>Cat</button>
      <button>Human <fc-icon icon="user" size="13"></fc-icon></button>
      <button>Fish</button>
</fc-button-group>

```

## Properties

| Property           | Attribute          | Type          | Default | Description                     |
|--------------------|--------------------|---------------|---------|---------------------------------|
| `disabled`         | `disabled`         | `boolean`     | false   | If the element is disabled      |
| `expendable`       | `expendable`       | `boolean`     | false   | If the element is expendable    |
| `getComputedStyle` |                    | `string \| 0` |         |                                 |
| `onWindowResize`   |                    | `any`         |         |                                 |
| `singleSelection`  | `single-selection` | `boolean`     |         | Allow only one option selection |

## Events

| Event    | Description            |
|----------|------------------------|
| `change` | when button is clicked |

## CSS Custom Properties

| Property                                         | Description                                      |
|--------------------------------------------------|--------------------------------------------------|
| `--fc-button-group-button-background-color`      | button's background-color. default: 'white'      |
| `--fc-button-group-button-background-color-color-active` | button's background-color on active. default: 'var(--fc-blue-100)' |
| `--fc-button-group-button-border-color`          | button's border-color. default: 'var(--fc-gray-400)' |
| `--fc-button-group-button-border-color-active`   | button's border-color on active. default: 'var(--fc-blue-500)' |
| `--fc-button-group-button-border-color-hover`    | button's border-color on hover. default: 'var(--fc-gray-700)' |
| `--fc-button-group-button-border-radius`         | first and last button border radius. default: '25px' |
| `--fc-button-group-button-color`                 | font color. default: 'var(--fc-gray-700)'        |
| `--fc-button-group-button-color-active`          | font color. default: 'var(--fc-gray-700)'        |
| `--fc-button-group-button-font-size`             | button's font-size. default: '12px'              |
| `--fc-button-group-button-height`                | button's height. default: '30px'                 |
| `--fc-button-group-button-inner-item-padding`    | button's inner left and right padding. default: '20px' |