DefaultSuccessRemovedNew
import { Stack } from '@chakra-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>
)
}
Anatomy
import { Badge } from '@saas-ui/react/badge'<Badge>Badge</Badge>Examples
Icon
Render an icon within the badge directly
NewNew
import { Stack } from '@chakra-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>
)
}
Variants
Badges come in different variants
OutlineSolidSubtleSurface
import { Stack } from '@chakra-ui/react'
import { Badge } from '@saas-ui/react'
export const BadgeWithVariants = () => {
return (
<Stack direction="row">
<Badge variant="outline">Outline</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="surface">Surface</Badge>
</Stack>
)
}
Sizes
Badges come in different sizes
NewNewNewNew
import { HStack } from '@chakra-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>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
variant | 'subtle' | 'solid' | 'subtle' | 'outline' | 'surface' | 'plain'The variant of the component |
size | 'sm' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |