fc-button-group

A group of buttons

Usage

<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

<!-- 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' |