Button Group

The Button Group component allows a more compact ui for radio buttons.

The Button Group component utilizes several props to determine the form and function of a Button Group instance. Refer to the following examples for appropriate syntax and usage.

Usage

Group a series of buttons together on a single line with the button group.

<template>
  <ci-button-group v-model="selectedButton">
    <ci-button-group-item value="btn1">Button 1</ci-button-group-item>
    <ci-button-group-item value="btn2">Button 2</ci-button-group-item>
    <ci-button-group-item value="btn3">Button Three</ci-button-group-item>
  </ci-button-group>
</template>
<script>
export default {
  data() {
    return {
      selectedButton: ''
    }
  }
}
</script>

Setting Default Button

Set a default button within a button group.

<template>
  <ci-button-group v-model="selectedButton">
    <ci-button-group-item value="btn1">Button 1</ci-button-group-item>
    <ci-button-group-item value="btn2">Button 2</ci-button-group-item>
    <ci-button-group-item value="btn3">Button Three</ci-button-group-item>
  </ci-button-group>
</template>
<script>
export default {
  data() {
    return {
      selectedButton: 'btn2'
    }
  }
}
</script>

Disabled

Add the disabled attribute to disable clicks to the button group and give it a disabled appearance.

<template>
  <ci-button-group v-model="selectedButton" disabled>
    <ci-button-group-item value="btn1">Button 1</ci-button-group-item>
    <ci-button-group-item value="btn2">Button 2</ci-button-group-item>
    <ci-button-group-item value="btn3">Button Three</ci-button-group-item>
  </ci-button-group>
</template>
<script>
export default {
  data() {
    return {
      selectedButton: 'btn2'
    }
  }
}
</script>

Capture update event

Capture the @update event in the button group

<template>
  <div>
    <p>Newly Selected Button Value: <b>{{ newlySelectedBtn }}</b></p>
    <ci-button-group
      v-model="selectedButton"
      @update="updateNewlySelectedBtnValue"
    >
      <ci-button-group-item value="btn1">Button 1</ci-button-group-item>
      <ci-button-group-item value="btn2">Button 2</ci-button-group-item>
      <ci-button-group-item value="btn3">Button Three</ci-button-group-item>
    </ci-button-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedButton: 'btn2',
      newlySelectedBtn: 'N/A'
    }
  },
  methods: {
    updateNewlySelectedBtnValue(newlySelectedBtnVal) {
      this.newlySelectedBtn = newlySelectedBtnVal
    }
  }
}
</script>

Props

Name	Type	Default	Description
value	String	N/A	The value of the selected CiButtonGroupItem.
disabled	Boolean	false	Disables the button group.

Slots

The button grup component uses the default slot to render a series of buttons together.

Slot	Description
default	Renders a series of buttons in a single line.

Events

Name	Description
@input	Emitted when the selected button group item is changed.
@update	Emitted when the selected button group item is changed.