Badge

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

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

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

export const BadgeIcon = () => {
  return (
    <Stack direction="row">
      <Badge colorPalette="blue">
        <HiStar />
        New
      </Badge>
      <Badge colorPalette="green">
        <HiAtSymbol />
        New
      </Badge>
    </Stack>
  )
}

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

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

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

export const BadgeVariants = () => {
  return (
    <HStack>
      <Badge variant="solid">New</Badge>
      <Badge variant="outline">New</Badge>
      <Badge variant="subtle">New</Badge>
    </HStack>
  )
}

import { Badge } from '@fidely-ui/react/badge'

export const BadgeAsChild = () => {
  return (
    <Badge asChild colorPalette="orange">
      <span>Badge</span>
    </Badge>
  )
}