Badge

import { Stack } from '@saas-ui/react'
import { Badge } from '@saas-ui/react'

export const BadgeBasic = () => {
  return (
    <Stack direction="row">
      <Badge>Default</Badge>
      <Badge colorPalette="green">Success</Badge>
      <Badge colorPalette="red">Removed</Badge>
      <Badge colorPalette="purple">New</Badge>
    </Stack>
  )
}

import { Stack } from '@saas-ui/react'
import { Badge } from '@saas-ui/react'
import { HiAtSymbol, HiStar } from 'react-icons/hi'

export const BadgeWithIcon = () => {
  return (
    <Stack align="flex-start">
      <Badge variant="solid" colorPalette="blue">
        <HiStar />
        New
      </Badge>
      <Badge variant="solid" colorPalette="green">
        New
        <HiAtSymbol />
      </Badge>
    </Stack>
  )
}

import { Stack } from '@saas-ui/react'
import { Badge } from '@saas-ui/react'

export const BadgeWithVariants = () => {
  return (
    <Stack gap="2" align="flex-start">
      <Stack direction="row">
        <Badge variant="outline">Outline</Badge>
        <Badge variant="solid">Solid</Badge>
        <Badge variant="subtle">Subtle</Badge>
        <Badge variant="surface">Surface</Badge>
      </Stack>
      <Stack direction="row">
        <Badge variant="outline" colorPalette="accent">
          Outline
        </Badge>
        <Badge variant="solid" colorPalette="accent">
          Solid
        </Badge>
        <Badge variant="subtle" colorPalette="accent">
          Subtle
        </Badge>
        <Badge variant="surface" colorPalette="accent">
          Surface
        </Badge>
      </Stack>
    </Stack>
  )
}

import { HStack } from '@saas-ui/react'
import { Badge } from '@saas-ui/react'

export const BadgeWithSizes = () => {
  return (
    <HStack>
      <Badge size="xs">New</Badge>
      <Badge size="sm">New</Badge>
      <Badge size="md">New</Badge>
      <Badge size="lg">New</Badge>
    </HStack>
  )
}

import { Stack, Text } from '@saas-ui/react'
import { Badge } from '@saas-ui/react'

import { colorPalettes } from '../lib/color-palettes'

export const BadgeWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
          width="full"
        >
          <Text minW="8ch">{colorPalette}</Text>
          <Badge colorPalette={colorPalette} variant="solid">
            New
          </Badge>
          <Badge colorPalette={colorPalette} variant="outline">
            New
          </Badge>
          <Badge colorPalette={colorPalette} variant="subtle">
            New
          </Badge>
          <Badge colorPalette={colorPalette} variant="surface">
            New
          </Badge>
        </Stack>
      ))}
    </Stack>
  )
}