Badge

Badges are used to highlight an item's status for quick recognition.

Import#

import { Badge } from "@nature-ui/core";

Usage#

<Badge>Default</Badge>

Badge Color#

Pass the color prop to customize the color of the Badge. color can be any color key that exists in theme.colors. Learn more about theming.

<Stack row>
  <Badge className="bg-teal-200 text-teal-700">Success</Badge>
  <Badge className="bg-red-300 text-red-700">Removed</Badge>
  <Badge className="bg-primary-300 text-primary-700">Nature ui</Badge>
  <Badge className="bg-orange-300 text-orange-700">New</Badge>
</Stack>

Badge Variants#

You can style a badge to your taste using tailwindcss. Here are a few example variants.

<Stack row>
  {/* outline */}
  <Badge className="border border-primary-600 text-primary-600">Default</Badge>

  {/* Solid */}
  <Badge className="bg-primary-500 text-white">Success</Badge>

  {/* Subtle */}
  <Badge className="bg-primary-200 text-primary-700">Removed</Badge>
</Stack>

Composition#

<Box className="flex">
  <Avatar src="https://tinyurl.com/y4mmkc9v" />
  <Box className="ml-3">
    <p className="font-bold">
      Divine Nature
      <Badge className="ml-1 bg-primary-200 text-primary-700">New</Badge>
    </p>
    <p className="text-sm">Software Engineer</p>
  </Box>
</Box>

Props#

Name	Type	Default	Description