You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-website/admin/bando/demos/ButtonGroup.svelte

26 lines
860 B

<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>