Badge

"use client";

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

export function BadgeDemo() {
  return (
    <HStack gap="2" wrap="wrap" justifyContent="center">
      <Badge colorScheme="green" variant="solid">Active</Badge>
      <Badge colorScheme="yellow">Pending</Badge>
      <Badge colorScheme="red" variant="surface">Failed</Badge>
      <Badge colorScheme="blue" variant="outline">Beta</Badge>
      <Badge>Default</Badge>
    </HStack>
  );
}

"use client";

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

const variants = ["solid", "subtle", "surface", "outline"] as const;
const sizes = ["xs", "sm", "md", "lg"] as const;

export function BadgeVariants() {
  return (
    <VStack gap="4" alignItems="start">
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="subtle">variants</Text>
        <HStack gap="2">
          {variants.map((variant) => (
            <Badge key={variant} variant={variant} colorScheme="brand">{variant}</Badge>
          ))}
        </HStack>
      </VStack>
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="subtle">sizes</Text>
        <HStack gap="2" alignItems="center">
          {sizes.map((size) => (
            <Badge key={size} size={size} colorScheme="teal">{size}</Badge>
          ))}
        </HStack>
      </VStack>
    </VStack>
  );
}