Button

<script lang="ts">
  import { Button } from 'sv5ui';
</script>

<Button label="Button" />

<Button variant="solid" label="Solid" />
<Button variant="outline" label="Outline" />
<Button variant="soft" label="Soft" />
<Button variant="subtle" label="Subtle" />
<Button variant="ghost" label="Ghost" />
<Button variant="link" label="Link" />

<Button color="primary" label="Primary" />
<Button color="secondary" label="Secondary" />
<Button color="tertiary" label="Tertiary" />
<Button color="success" label="Success" />
<Button color="warning" label="Warning" />
<Button color="error" label="Error" />
<Button color="info" label="Info" />
<Button color="surface" label="Surface" />

<Button size="xs" label="Extra Small" />
<Button size="sm" label="Small" />
<Button size="md" label="Medium" />
<Button size="lg" label="Large" />
<Button size="xl" label="Extra Large" />

<!-- Icon only -->
<Button icon="lucide:plus" />

<!-- Icon only with square aspect ratio -->
<Button icon="lucide:settings" square />
<Button icon="lucide:heart" variant="outline" square />
<Button icon="lucide:trash-2" variant="soft" color="error" square />

<!-- Leading icon -->
<Button leadingIcon="lucide:download" label="Download" />

<!-- Trailing icon -->
<Button trailingIcon="lucide:arrow-right" label="Next" />

<!-- Both icons -->
<Button leadingIcon="lucide:mail" trailingIcon="lucide:send" label="Send" />

<!-- Trailing prop: moves single icon to trailing side -->
<Button icon="lucide:arrow-right" label="Continue" trailing />

<!-- Default loading -->
<Button label="Loading" loading />

<!-- Custom loading icon -->
<Button label="Refreshing" loading loadingIcon="lucide:refresh-cw" />

<!-- Loading with variant -->
<Button label="Saving" loading variant="outline" />
<Button label="Loading" loading variant="soft" />

<script lang="ts">
  import { Button } from 'sv5ui';

  function handleSave() {
    return new Promise((resolve) => setTimeout(resolve, 2000));
  }
</script>

<!-- Automatically shows loading while the promise is pending -->
<Button label="Save Changes" loadingAuto onclick={handleSave} />
<Button label="Submit" loadingAuto onclick={handleSave} variant="outline" />

<Button label="Disabled" disabled />
<Button label="Disabled" disabled variant="outline" />
<Button label="Disabled" disabled variant="soft" />

<Button label="Full Width Button" block />
<Button label="Full Width Outline" variant="outline" block />
<Button label="Full Width Soft" variant="soft" block />

<form onsubmit|preventDefault={() => alert('Submitted!')}>
  <Button type="submit" label="Submit" color="primary" />
  <Button type="reset" label="Reset" variant="outline" color="surface" />
  <Button type="button" label="Cancel" variant="ghost" />
</form>

<!-- Internal link -->
<Button href="/docs" label="Go to Docs" />

<!-- External link with external prop -->
<Button href="https://github.com" external label="GitHub" leadingIcon="mdi:github" />

<!-- External adds target="_blank" and rel="noopener noreferrer" automatically -->

<script lang="ts">
  import { Button, FormField, Input } from 'sv5ui';

  let email = $state('');
  let message = $state('');

  function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
    message = email ? `Subscribed: ${email}` : 'Submitted without an email';
  }
</script>

<!-- The form lives on its own; buttons are associated by id via `form` -->
<form id="newsletter" onsubmit={handleSubmit}>
  <FormField label="Email">
    <Input bind:value={email} name="email" type="email" required placeholder="you@example.com" />
  </FormField>
</form>

<!-- Native button form attributes are now type-checked -->
<Button type="submit" form="newsletter" label="Subscribe" color="primary" />
<Button type="submit" form="newsletter" formnovalidate label="Submit anyway" variant="outline" color="surface" />

<!-- Typed <a> attributes apply when rendering as a link -->
<Button href="/favicon.png" download="sv5ui-icon.png" leadingIcon="lucide:download" label="Download" variant="soft" />

<!-- Manually set active state -->
<Button label="Active" active variant="ghost" activeVariant="soft" />

<!-- Active with different color -->
<Button label="Active" active activeColor="success" variant="ghost" />

<!-- Auto-detected from URL (with exact matching) -->
<Button href="/docs" label="Docs" variant="ghost" activeVariant="soft" activeColor="primary" exact />

<!-- Custom active/inactive classes -->
<Button
  href="/docs"
  label="Custom Active"
  variant="ghost"
  activeClass="font-bold ring-2 ring-primary"
  inactiveClass="opacity-60"
/>

<Button
  avatar={{ src: 'https://i.pravatar.cc/32?u=1', alt: 'John' }}
  label="John Doe"
/>

<Button
  avatar={{ src: 'https://i.pravatar.cc/32?u=2', alt: 'Jane' }}
  label="Jane Smith"
  variant="outline"
/>

<Button
  avatar={{ src: 'https://i.pravatar.cc/32?u=3', alt: 'User' }}
  label="Profile"
  trailingIcon="lucide:chevron-down"
  variant="ghost"
/>

<script lang="ts">
  import { Button } from 'sv5ui';

  let buttonRef = $state<HTMLElement | null>(null);

  function inspectButton() {
    if (!buttonRef) return;
    console.log('Tag:', buttonRef.tagName);
    console.log('Size:', buttonRef.offsetWidth, 'x', buttonRef.offsetHeight);
    console.log('Text:', buttonRef.textContent?.trim());
    console.log('Classes:', buttonRef.className);
  }
</script>

<Button bind:ref={buttonRef} label="Inspect Me" leadingIcon="lucide:search" onclick={inspectButton} />