<template>
  <section>
    <h2 class="title">Button Toggle</h2>

    <md-button-toggle class="md-button-group">
      <md-button class="md-icon-button md-toggle">
        <md-icon>format_bold</md-icon>
      </md-button>

      <md-button class="md-icon-button" disabled>
        <md-icon>format_italic</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>strikethrough_s</md-icon>
      </md-button>

      <md-button class="md-icon-button md-toggle">
        <md-icon>title</md-icon>
      </md-button>
    </md-button-toggle>

    <md-button-toggle type="radio" class="md-button-group md-primary" style="margin-top: 24px">
      <md-button class="md-icon-button">
        <md-icon>format_align_left</md-icon>
      </md-button>

      <md-button class="md-icon-button md-toggle">
        <md-icon>format_align_center</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>format_align_right</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>format_align_justify</md-icon>
      </md-button>
    </md-button-toggle>

    <md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
      <md-button class="md-icon-button md-toggle">
        <md-icon>format_bold</md-icon>
      </md-button>

      <md-button class="md-icon-button md-toggle">
        <md-icon>format_italic</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>format_underline</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>title</md-icon>
      </md-button>
    </md-button-toggle>

    <md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
      <md-button class="md-icon-button md-toggle">
        <md-icon>format_bold</md-icon>
      </md-button>

      <md-button class="md-icon-button md-toggle">
        <md-icon>format_italic</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>strikethrough_s</md-icon>
      </md-button>

      <md-button class="md-icon-button">
        <md-icon>title</md-icon>
      </md-button>
    </md-button-toggle>
  </section>
</template>
