Badge

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

Badge is built with Chakra UI Badge. Visual appearance is defined by extension methods from the base Badge component.

Base example

import { Badge } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Badge>Label</Badge>;
}

Using different variants

You can access the different variants with extension methods from the Badge component. Using Badge without a defined extension method defaults to “Neutral” variant.

import { Badge, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Stack direction="row">
        <Badge size="md" mr="0.5rem">
          Neutral
        </Badge>
        <Badge.Primary size="md">Primary</Badge.Primary>
      </Stack>
      <Stack direction="row">
        <Badge solid size="md" mr="0.5rem">
          Neutral
        </Badge>
        <Badge.Primary solid size="md">
          Primary
        </Badge.Primary>
      </Stack>
    </Stack>
  );
}

Badge with Icon

You can render an Icon to the left of the passed children using the icon prop and passing an icon component from the library.

import { Badge, DiscountIcon, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Badge.Success icon={DiscountIcon} size="sm">
        Success
      </Badge.Success>
      <Badge.Success icon={DiscountIcon}>Success</Badge.Success>
    </Stack>
  );
}

Error

Badge is only accepting children element/elements that ultimatly renders strings, if you have provided a child that does not render a string an error will be thrown.

import { Badge, DiscountIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Badge>
      <DiscountIcon />
    </Badge>
  );
}