Badge

Source

Theme Source

The Badge component in Pearl UI is a small, versatile element that is typically used to display a numerical value or indicate the status of an item to the user. It can be used standalone or attached to other components to enhance their functionality.

Import#

Pearl UI provides two badge-related components for your convenience:

Badge: This is a standalone badge that can display a numerical value or an icon.
withBadge: This is a higher-order component that can be used to add a badge to any target component.

You can import these components as follows:

import { withBadge, Badge } from "pearl-ui";

Usage#

// Displaying a numerical value in the badge<Badge>23</Badge>;
// Displaying an icon in the badgeimport { Icon } from "pearl-ui";
<Badge>  <Icon iconFamily="Entypo" iconName="edit" color="neutral.50" size="s"></Icon></Badge>;

Badge Sizes#

The size prop allows you to adjust the size of the badge. You can set the value to the keys available in PearlTheme.components.Badge["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

<Badge size="xs">234+</Badge><Badge size="s">234+</Badge><Badge size="m">234+</Badge><Badge size="l">234+</Badge>

Badge Variants#

The variant prop allows you to change the shape of the badge. You can set the value to the keys available in PearlTheme.components.Badge["variants"], which are "rounded" and "square" in the default component configuration.

<Badge variant="rounded">2</Badge><Badge variant="square">NEW</Badge>

Badge Color Scheme#

The colorScheme prop allows you to change the color palette of the badge. You can set the value only to the keys available in PearlTheme.palette that contain a palette of colors represented as an object, which are "primary", "secondary", "neutral", etc in the default Pearl theme.

<Badge colorScheme="primary" /><Badge colorScheme="success" /><Badge colorScheme="warning" /><Badge colorScheme="info" /><Badge colorScheme="danger" />

Attaching Badges to Other Components#

The Badge component can be attached to other components using the withBadge function. This function allows you to add a badge to any React component in a simple manner, while also providing you the freedom to customize the badge as needed. The list of props expected by withBadge can be found here.

This can be particularly useful when dealing with common use-cases of badges such as adding a notification badge as follows:

// Attaching a 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" />;

Overriding Styles#

The Badge component 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 precedence than the default component configuration.

<Badge backgroundColor="blue" variant="square" mt="4" />

Example#

Embed not loading? Click here

Badge Component Properties#

Supported Style Properties#

The Badge component composes the Pressable component, so you can pass all Pressable related props to it.

Additional Properties#

Here are some additional properties that the Badge component supports:

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Badge["sizes"]	`"m"`	Size of the badge.
`variant`	No	PearlTheme.components.Badge["variants"]	`"rounded"`	Variant of the badge.
`colorScheme`	No	PearlTheme["palette"]	`"primary"`	Active color palette of the badge.

withBadge Function Properties#

The withBadge function accepts the following parameters:

Name	Required	Type	Default	Description
`badgeValue`	No	string \| number \| React.ReactElement \| undefined		The value to be displayed inside the badge.
`options`	No	WithBadgeOptions & BadgeProps		An object containing options for customizing the badge.

Options#

The options parameter is an object that accepts all Badge properties along with the following additional properties:

Name	Required	Type	Default	Description
`placement`	No	"topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight"	`"topRight"`	The position of the badge with respect to the base component.
`offset`	No	number	`5`	Amount of extra spacing to add between the badge and the base component.
`hidden`	No	boolean	`false`	Whether the badge is visible or not.