Button

Svelte

<Btn
  accent="base|alpha|beta|gamma|danger"
  variant="text|filled|outlined|tab"
  colored
  iconOnly
  round
  slim
>
  <b>button</b>
  <Icon name="check" />
</Btn>
<!-- Or -->
<Btn
  text="my button"
  id="my-btn"
  type="submit|reset|button"
  size="small|large"
  title="my title"
  disabled
/>

<!-- show loading state -->
<Btn isLoading />

<!-- with tooltip -->
<Btn iconOnly>
  <Tooltip text="edit" />
  <Icon name="edit" />
</Btn>

<!-- only icon -->
<BtnIcon iconName="settings" title="settings"  />

HTML

<button class="btn [accent] [variant] colored icon-only round">
  <span class="textbtn">button</span>

  <!-- or -->
  <b>button</b>
  <!-- .textbtn is equal to .btn > b - for convenience -->

  <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
    <use href="#check"></use>
  </svg>
</button>

<!-- for loading state add "is-loading" class -->
<button class="is-loading">
  <!-- ### -->
</button>

<!-- with tooltip -->
<span class="tooltip top|bottom|left|right">my tooltip</span>

Customize CSS

:root {
  /* scaling is done by font-size */
  --btn-large-font-size: 1.5rem;
  --btn-small-font-size: 0.75rem;

  --btn-h: 2.6em;
  --btn-px-min: calc(var(--btn-h) / 4);
  --btn-br: calc(var(--btn-h) / 6);
}

:root {
  --focusable-outline-width: 3px;
  --focusable-outline-style: solid;
  --focusable-transition-duration: 150ms;
}

Snippets

{
  "kazkadien-button": {
    "prefix": "kbutton",
    "body": [
      "<Btn accent=${1|'','alpha','beta','gamma','danger','base'|} variant=${2|'','text','filled','outlined','tab'|} text='${3:submit}' on:click={${4:() => }} />"
    ]
  }
}