source/ui/src/lib/ComposeButton.svelte

<script lang="ts">
import { loading } from '$lib/stores';

$: text = $loading ? 'Composing...' : 'Compose ✨';
</script>

<button disabled={$loading}>{text}</button>

<style>
button {
  display: block;
  font-size: 1.2rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: hsl(0 0% 97%);
  background: transparent;
  border: 3px solid hsl(0 0% 97%);
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin: 1rem auto 2rem;
}

button[disabled] {
  border-color: hsl(0 0% 50%);
  color: hsl(0 0% 50%);
  cursor: initial;
}
</style>