Icon Badge
Display an icon as a badge.
The IconBadge
component wraps individual keys in a <Kbd />
component.
Source
Theme source
@saas-ui/core
- 2.10.0 (latest)
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?