Badge

Badge displays a small badge with short information to it's children.

Import

import { Badge } from "@prismane/core";

Usage

By default, Badge uses the primary color.

<Badge label="4">
  <Square size={fr(10)} bg="base" />
</Badge>

Badge Positions

The Badge component supports all of the PrismanePositions as values for the position prop. By default it uses the right-start position.

<>
  <Badge label="4" position="right-start">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="right">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="right-end">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="left-start">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="left">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="left-end">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="bottom-start">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="bottom">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="bottom-end">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="top-start">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="top">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" position="top-end">
    <Square size={fr(10)} bg="base" />
  </Badge>
</>

Badge Sizes

The Badge component supports all of the PrismaneBreakpoints as values for the size prop.

<>
  <Badge label="4" size="xs">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" size="sm">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" size="base">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" size="md">
    <Square size={fr(10)} bg="base" />
  </Badge>
  &nbsp;
  <Badge label="4" size="lg">
    <Square size={fr(10)} bg="base" />
  </Badge>
</>

Badge Colors

The Badge component's color can be changed by the color prop, which supports all of PrismaneColors

<>
  <Badge label="4" color="ruby">
    <Square size={fr(10)} bg="base" />
  </Badge>
  <Badge label="4" color="lime">
    <Square size={fr(10)} bg="base" />
  </Badge>
  <Badge label="4" color="teal">
    <Square size={fr(10)} bg="base" />
  </Badge>
</>

Text Colors

To change the text color of the Badge, you can pass a value to the cl prop.

<Badge label="4" color="base" cl="diamond">
  <Square size={fr(10)} bg="base" />
</Badge>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Badge

Go BackBackdrop

Up NextBox