@forter/button-group v1.7.0

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

Events

CSS Custom Properties