Badge

Badge can be used to highlight important information.

#

Import

Badge - The main Badge component.

import { Badge } from "@dreamy-ui/react/rsc";

#

Usage

Prime

<Badge>Prime</Badge>

#

Variants

You can change the variant of the Badge by using the variant prop.

Outline

Subtle

<HStack>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="subtle">Subtle</Badge>
</HStack>

#

(Color) Schemes

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

<HStack>
  <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>
</HStack>

#

Schemes with variants

You can combine the variant and scheme props to create a badge with different variants and colors.