<div class="space-y-4 w-full">
  <div class="w-full">
    <h4 class="text-sm font-medium mb-2">Wide Button</h4>
    <div class="w-full">
      <c-lb.button modifier="wide">Wide Button</c-lb.button>
    </div>
  </div>

  <div class="w-full">
    <h4 class="text-sm font-medium mb-2">Block Button</h4>
    <div class="w-full">
      <c-lb.button modifier="block">Block Button</c-lb.button>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Square Buttons</h4>
    <div class="flex flex-wrap gap-2">
      <c-lb.button modifier="square">+</c-lb.button>
      <c-lb.button modifier="square" variant="primary">×</c-lb.button>
      <c-lb.button modifier="square" variant="secondary">✓</c-lb.button>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Circle Buttons</h4>
    <div class="flex flex-wrap gap-2">
      <c-lb.button modifier="circle">+</c-lb.button>
      <c-lb.button modifier="circle" variant="primary">×</c-lb.button>
      <c-lb.button modifier="circle" variant="secondary">✓</c-lb.button>
    </div>
  </div>
</div>
