Button

import { Button } from '@bindshq/stance-react';

export function Basic() {
  return <Button>Save changes</Button>;
}

import { Button } from '@bindshq/stance-react';

export function Variants() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Delete</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

import { Button } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12 }}>
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

import { Button, Icon } from '@bindshq/stance-react';

export function WithIcons() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Button leadingIcon={<Icon name="plus" />}>New template</Button>
      <Button variant="outline" trailingIcon={<Icon name="arrow-right" />}>
        Continue
      </Button>
    </div>
  );
}

import { Button } from '@bindshq/stance-react';

export function Loading() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Button loading>Save</Button>
      <Button loading loadingText="Publishing…" variant="outline">
        Publish
      </Button>
    </div>
  );
}

import { Button, Icon } from '@bindshq/stance-react';

export function Pill() {
  return (
    <Button shape="pill" size="lg" trailingIcon={<Icon name="arrow-right" />}>
      Let’s talk
    </Button>
  );
}

import { Button } from '@bindshq/stance-react';

export function AsLink() {
  return (
    <Button asChild variant="outline">
      <a href="#docs">Read the docs</a>
    </Button>
  );
}