Icon Badge

Display an icon as a badge.

The IconBadge component wraps individual keys in a <Kbd /> component.

Usage

Basic

import { IconBadge } from '@saas-ui/react'
import { FiUser } from 'react-icons/fi'
export default function Page() {
return <IconBadge icon={<FiUser />} />
}

Sizes

IconBadge supports sm, md, lg sizes. The default size is md.

import { IconBadge } from '@saas-ui/react'
import { FiUser } from 'react-icons/fi'
import { HStack } from '@chakra-ui/react'
export default function Page() {
return (
<HStack>
<IconBadge icon={<FiUser />} size="sm" />
<IconBadge icon={<FiUser />} size="md" />
<IconBadge icon={<FiUser />} size="lg" />
</HStack>
)
}

Variants

IconBadge supports outline and solid variants. The default variant is outline.

import { IconBadge } from '@saas-ui/react'
import { FiUser } from 'react-icons/fi'
import { HStack } from '@chakra-ui/react'
export default function Page() {
return (
<HStack>
<IconBadge icon={<FiUser />} variant="outline" colorScheme="primary" />
<IconBadge icon={<FiUser />} variant="solid" colorScheme="primary" />
</HStack>
)
}

Was this helpful?