<.button_group id="button-group-single-basic">
  <:button on_click={%JS{}} selected={true}>First</:button>
  <:button on_click={%JS{}}>Second</:button>
  <:button on_click={%JS{}}>Third</:button>
  <:button on_click={%JS{}}>Fourth</:button>
</.button_group>

<.button_group id="button-group-single-with-disabled">
  <:button on_click={%JS{}} selected={true}>First</:button>
  <:button on_click={%JS{}} disabled={true}>Second</:button>
  <:button on_click={%JS{}}>Third</:button>
  <:button on_click={%JS{}}>Fourth</:button>
</.button_group>

<.button_group
  id="button-group-single-with-wrapper-customizations"
  space="base"
  wrapper="cluster"
  justify="center"
>
  <:button on_click={%JS{}} selected={true}>First</:button>
  <:button on_click={%JS{}}>Second</:button>
  <:button on_click={%JS{}}>Third</:button>
  <:button on_click={%JS{}}>Fourth</:button>
</.button_group>

<.button_group id="button-group-single-anchor" as="a">
  <:button on_click={%JS{}} selected={true}>First</:button>
  <:button on_click={%JS{}}>Second</:button>
  <:button on_click={%JS{}}>Third</:button>
  <:button on_click={%JS{}}>Fourth</:button>
</.button_group>

<.button_group id="button-group-single-anchor-with-disabled" as="a">
  <:button on_click={%JS{}} selected={true}>First</:button>
  <:button on_click={%JS{}} disabled={true}>Second</:button>
  <:button on_click={%JS{}}>Third</:button>
  <:button on_click={%JS{}}>Fourth</:button>
</.button_group>