Badge
A Badge is a small component typically used to communicate a numerical value or indicate the status of an item to the user.
#
ImportPearl UI exports 2 badge-related components:
- Badge: A single badge which displays a numerical value or an icon.
- withBadge: A higher-order component which can be used to add a badge to any target component.
import { withBadge, Badge } from "pearl-ui";
#
Usage// Adds a numerical value to the badge<Badge>23</Badge>;
// Adds an icon to the badgeimport { Icon } from "pearl-ui";
<Badge> <Icon iconFamily="Entypo" iconName="edit" color="neutral.50" size="s"></Icon></Badge>;
#
Badge sizesUse the size
prop to change the size of the badge. You can set the value to the keys available in
<Badge size="s">234+</Badge>
<Badge size="m">234+</Badge>
<Badge size="l">234+</Badge>
<Badge size="xl">234+</Badge>
#
Badge variantsUse the variant
prop to change the type of badge used. You can set the value to the keys available in
<Badge variant="rounded">2</Badge>
<Badge variant="square">NEW</Badge>
#
Badge color schemeUse the colorScheme
prop to change the color palette of the badge.
You can set the value only to the keys available in
<Badge colorScheme="primary" />
<Badge colorScheme="success" />
<Badge colorScheme="warning" />
<Badge colorScheme="info" />
<Badge colorScheme="danger" />
#
Attaching badges to other componentsThe true power of Badge is revealed when it is coupled with other components. The withBadge function allows you to add a badge to any React component is an extremely simple manner, while provoding you the freedom to customize at will. The list of props expected by withBadge can be found here.
This can prove helpful when dealing with common use-cases of badges such as adding a notification badge as follows:
// Attaches the badge to an Icon componentimport { Icon, IconProps } from "pearl-ui";
const numberOfNotifications = 5;
const BadgedIcon = withBadge<IconProps>(numberOfNotifications, { placement: "topRight", size: "s", colorScheme: "danger",})(Icon);
return <BadgedIcon iconFamily="FontAwesome" iconName="inbox" />;
#
Override StyleThe Badge component also supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedance than the default component config.
<Badge backgroundColor="blue" variant="square" mt="l" />
#
Example#
Badge Props#
Supported style propsBadge composes Pressable so you can pass all Pressable related props to it.
#
Additional propsName | Required | Type | Default | Description |
---|---|---|---|---|
size | false | "m" | Size of the badge. | |
variant | false | "rounded" | Variant of the badge. | |
colorScheme | string | "primary" | Active color palette of the badge. |
#
withBadge PropsName | Required | Type | Default | Description |
---|---|---|---|---|
badgeValue | true | The value to be displayed inside the badge. | ||
hidden | false | A set of options for customizing the look of the badge. | ||
options | false | Whether the badge is visible or not. |
#
Default Component Configexport default { parts: ["root", "text"], baseStyle: { root: { backgroundColor: "primary.500", }, text: { color: "neutral.50", }, }, sizes: { s: { root: { minW: 20, h: 20, }, text: { px: "2xs", variant: "btn4", }, }, m: { root: { minW: 25, h: 25, }, text: { px: "xs", variant: "btn4", }, }, l: { root: { minW: 30, h: 30, }, text: { px: "xs", variant: "btn3", }, }, xl: { root: { minW: 35, h: 35, }, text: { px: "s", variant: "btn3", }, }, }, variants: { rounded: { root: { borderRadius: "full", }, }, square: { root: { borderRadius: "m", }, }, }, defaults: { size: "m", variant: "rounded", },};