Button

"use client";

import { Button, Icon, HStack } from "astralis-ui";
import { Sparkles } from "lucide-react";

export function ButtonDemo() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button leftIcon={<Icon as={Sparkles} size="xs" />}>Get started</Button>
      <Button variant="subtle">Learn more</Button>
      <Button variant="outline" colorScheme="gray">
        Cancel
      </Button>
    </HStack>
  );
}

import { Button, HStack } from "astralis-ui";

export function ButtonVariants() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button variant="solid">Solid</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="surface">Surface</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="text">Text</Button>
      <Button variant="link">Link</Button>
    </HStack>
  );
}

import { Button, Text, VStack, HStack } from "astralis-ui";

const variants = ["solid", "subtle", "surface", "outline", "text", "link"] as const;
const schemes = [
  "brand", "gray", "red", "orange", "yellow", "green",
  "teal", "blue", "cyan", "purple", "pink",
] as const;

export function ButtonColorSchemes() {
  return (
    <VStack gap="6" alignItems="stretch">
      {variants.map((variant) => (
        <VStack key={variant} gap="2" alignItems="stretch">
          <Text as="span" size="xs" weight="medium" color="muted">
            {variant}
          </Text>
          <HStack gap="2" wrap="wrap">
            {schemes.map((scheme) => (
              <Button key={scheme} size="xs" variant={variant} colorScheme={scheme}>
                {scheme}
              </Button>
            ))}
          </HStack>
        </VStack>
      ))}
    </VStack>
  );
}

import { Button, HStack } from "astralis-ui";

export function ButtonSizes() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra large</Button>
    </HStack>
  );
}

import { Button, HStack } from "astralis-ui";

export function ButtonRounded() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button variant="surface" rounded="none">None</Button>
      <Button variant="surface" rounded="sm">Small</Button>
      <Button variant="surface" rounded="lg">Large</Button>
      <Button variant="surface" rounded="2xl">2XL</Button>
      <Button variant="surface" rounded="full">Full</Button>
    </HStack>
  );
}

"use client";

import { Button, Icon, HStack } from "astralis-ui";
import { Search, ChevronDown, Settings, Trash2 } from "lucide-react";

export function ButtonIcons() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button leftIcon={<Icon as={Search} size="xs" />}>Search</Button>
      <Button variant="outline" rightIcon={<Icon as={ChevronDown} size="xs" />}>
        Open menu
      </Button>
      {/* Icon-only buttons need an aria-label for assistive tech. */}
      <Button variant="subtle" leftIcon={<Icon as={Settings} size="xs" />} aria-label="Settings" />
      <Button
        variant="subtle"
        colorScheme="red"
        leftIcon={<Icon as={Trash2} size="xs" />}
        aria-label="Delete"
      />
    </HStack>
  );
}

"use client";

import { useState } from "react";
import { Button, HStack } from "astralis-ui";

export function ButtonLoading() {
  const [saving, setSaving] = useState(false);

  const save = () => {
    setSaving(true);
    setTimeout(() => setSaving(false), 2000);
  };

  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      <Button loading>Loading</Button>
      <Button variant="outline" loading loadingText="Submitting…" />
      <Button variant="subtle" loading loaderPlacement="end" loadingText="Uploading" />
      <Button onClick={save} loading={saving} loadingText="Saving…">
        Click to save
      </Button>
    </HStack>
  );
}

"use client";

import { Button, Icon, VStack } from "astralis-ui";
import { CreditCard } from "lucide-react";

export function ButtonFullWidth() {
  return (
    <VStack gap="3" w="full" maxW="sm">
      <Button fullWidth leftIcon={<Icon as={CreditCard} size="xs" />}>
        Complete checkout
      </Button>
      <Button fullWidth variant="outline" colorScheme="gray">
        Continue shopping
      </Button>
    </VStack>
  );
}

"use client";

import { Button, Icon, HStack } from "astralis-ui";
import { ExternalLink } from "lucide-react";

export function ButtonAsLink() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      {/* Renders a real <a>; href/target come from the anchor's prop types. */}
      <Button
        as="a"
        href="https://github.com"
        target="_blank"
        variant="surface"
        rightIcon={<Icon as={ExternalLink} size="xs" />}
      >
        View on GitHub
      </Button>
      <Button as="a" href="#usage" variant="link">
        Jump to usage
      </Button>
    </HStack>
  );
}