---
title: Button
---

<script>
  import { Button, Combobox } from 'slender-ui'
  import { ComponentContainer, VariantSelector, ColorSelector } from '$lib'

  let color

  let variant

  let icon = ''
</script>

The design workhorse of Making Shit Happen. _But slender_.

<ComponentContainer>
  <Button label="Makes me happy"
    {color}
    {variant}
    on:click={() => alert('Makes me feel this way!') }
    iconRight={ icon }
  />

  <div slot="code">

```svelte
<script>
  import { Button } from 'slender-ui'
</script>

<Button
  label="Makes me happy"
  variant="solid"
  color="primary"
  on:click={() => alert('Makes me feel this way!')}
  iconRight="feather.calendar"
/>
```

  </div>
</ComponentContainer>

<div class="not-prose relative flex mt-3 space-x-6">
  <ColorSelector bind:color />

  <VariantSelector bind:variant />

  <div class="space-y-1.5">
    <p class="text-sm"><span class="font-semibold">Icon</span></p>

    <Combobox variant="soft" color="primary" on:select={ (evt) => icon = evt.detail.value } class="px-2 py-1" options={['feather.calendar']} />

  </div>
</div>