pnpm dlx dreamy add badgeBadge is a component that can be used to highlight important information.
Prime
<Badge>Prime</Badge>You can change the variant of the Badge by using the variant prop.
Outline
Subtle
Plain
<HStack>
<Badge variant="outline">Outline</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="plain">Plain</Badge>
</HStack>You can change the color scheme of the Badge by using the scheme prop. Don't mistake this with the css colorScheme property.
Primary
Secondary
Success
Warning
Error
Info
None
<Wrap>
<Badge scheme="primary">Primary</Badge>
<Badge scheme="secondary">Secondary</Badge>
<Badge scheme="success">Success</Badge>
<Badge scheme="warning">Warning</Badge>
<Badge scheme="error">Error</Badge>
<Badge scheme="info">Info</Badge>
<Badge scheme="none">None</Badge>
</Wrap>You can combine the variant and scheme props to create a badge with different variants and colors.
Primary
Secondary
Success
Warning
Error
Info
None
<Wrap>
<Badge variant="outline" scheme="primary">
Primary
</Badge>
<Badge variant="outline" scheme="secondary">
Secondary
</Badge>
<Badge variant="outline" scheme="success">
Success
</Badge>
<Badge variant="outline" scheme="warning">
Warning
</Badge>
<Badge variant="outline" scheme="error">
Error
</Badge>
<Badge variant="outline" scheme="info">
Info
</Badge>
<Badge variant="outline" scheme="none">
None
</Badge>
</Wrap>