<script>
  import Icon from "$/client/components/Icon.svelte";
</script>

<style>
  button-group.vertical {
    width: min-content;
  }
</style>

<p>This is also shown at the bottom the Card demo. It's just a compact strip for buttons.</p>

<button-group>
    <button id="ok"><Icon name="check-circle" color="var(--color-accent)" size="48" /></button>
    <button><Icon name="x-circle" color="var(--color-bg)"  size="48"/></button>
    <button><Icon name="alert-circle" color="var(--color-bg)"  size="48"/></button>
</button-group>

<h2>Vertical</h2>

<button-group class="vertical">
    <button id="ok"><Icon name="check-circle" color="var(--color-accent)" size="48" /></button>
    <button><Icon name="x-circle" color="var(--color-bg)"  size="48"/></button>
    <button><Icon name="alert-circle" color="var(--color-bg)"  size="48"/></button>
</button-group>
