<script>
    import Icon from "./utils/Icon.svelte";
</script>


<p style="display: flex; flex-direction: column; align-items: start">
    <button>Default button</button>
    <button class="bold">Default bold button</button>
    <button class="primary">
        <Icon name="square"/>
        Primary button
    </button>
    <button class="primary bold">
        <Icon name="square"/>
        Primary bold button
    </button>
    <button class="success">
        <Icon name="check"/>
        Success button
    </button>
    <button class="success bold">
        <Icon name="check"/>
        Success bold button
    </button>
    <button class="info">
        <Icon name="info"/>
        Info button
    </button>
    <button class="info bold">
        <Icon name="info"/>
        Info bold button
    </button>
    <button class="warning">
        <Icon name="alert-triangle"/>
        Warning button
    </button>
    <button class="warning bold">
        <Icon name="alert-triangle"/>
        Warning bold button
    </button>
    <button class="error">
        <Icon name="x-circle"/>
        Error button
    </button>
    <button class="error bold">
        <Icon name="x-circle"/>
        Error bold button
    </button>
</p>
