The Badge
component is used to display a small amount of information to the user. It can be used to display a count of items or a status. The default type is default
but it can also be success
, warning
or error
.
import { Badge } from '~/core/ui/Badge';
<Badge>
User
</Badge>
You can also set a smaller size by using the size
prop.
import { Badge } from '~/core/ui/Badge';
<Badge size='sm'>
User
</Badge>
Alternatively, provide a fully custom Badge
using the size
, color
and className
props.
import { Badge } from '~/core/ui/Badge';
<Badge
size='custom'
color='custom'
className='py-2 px-4 rounded-sm border'
>
User
</Badge>
Success
Create a success badge by using the color
prop.
import { Badge } from '~/core/ui/Badge';
<Badge color='success'>
Success
</Badge>
Use an Icon next to the text:
import { CheckIcon } from '@heroicons/react/24/outline';
import { Badge } from '~/core/ui/Badge';
<Badge size='small' color='success'>
<CheckIcon className='h-3'>
Success
</Badge>
Error
Create an errror badge by using the color
prop.
import { Badge } from '~/core/ui/Badge';
<Badge color='error'>
Error
</Badge>
Use an Icon next to the text:
import { CheckIcon } from '@heroicons/react/24/outline';
import { Badge } from '~/core/ui/Badge';
<Badge size='small' color='error'>
<CheckIcon className='h-3'>
Error
</Badge>