The Badge component is a versatile UI element used to display additional information, notifications, or status indicators. This documentation provides an overview of the Badge component and its different variants, states, sizes, and additional features, along with usage examples.
Anatomy
The anatomy of a badge is elegantly simple, consisting of two primary elements. The "label" serves as the textual or numerical content displayed within the badge, while the "container" frames and encapsulates the label, defining the badge's boundaries. Together, these elements form a versatile tool for highlighting information, notifications, or status indicators within your user interface.
Properties
The badge component offers a range of customizable properties, including text, background color, text color, shape, size, and position. It also supports a "count" property for numerical values and various visual "variants" for distinct styles. These properties enable you to create badges that fit your design needs and effectively convey information or notifications in your application.
Kind
Default badge variant uses a small dot to indicate the presence of new information or notifications without displaying specific content.
Text badge variant displays textual content, such as numbers or short labels.
import React from'react';import { PlusBadge, PlusAvatar } from'@plusui/react';// Plus-Badge Examples in ReactconstBadgeExamples= () => ( <> <PlusBadge> <PlusAvatarinvertshape="square" /> {/* Badge without content */} </PlusBadge> <PlusBadgecontent="1"> <PlusAvatarinvertshape="square" /> {/* Badge with numeric content */} </PlusBadge> <PlusBadgecontent="New"> <PlusAvatarinvertshape="square" /> {/* Badge with text content */} </PlusBadge> </>);exportdefault BadgeExamples;
<plus-badge> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge without content --></plus-badge><plus-badgecontent="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge with numeric content --></plus-badge><plus-badgecontent="New"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge with text content --></plus-badge>
<template> <plus-badge> <plus-avatarinvertshape="square" /> <!-- Badge without content --> </plus-badge> <plus-badgecontent="1"> <plus-avatarinvertshape="square" /> <!-- Badge with numeric content --> </plus-badge> <plus-badgecontent="New"> <plus-avatarinvertshape="square" /> <!-- Badge with text content --> </plus-badge></template>
<plus-badge> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge without content --></plus-badge><plus-badgecontent="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge with numeric content --></plus-badge><plus-badgecontent="New"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Badge with text content --></plus-badge>
Status
The Badge component supports different states to indicate various statuses or interactions.
Default state represents the badge in its normal state, with no specific interactions or changes.
Info state is typically used to indicate an information need to considered.
Success state is used to signify that a task or action has been completed successfully. It typically uses a green color to convey a positive outcome.
Warning state is used to highlight potential issues or warnings. It typically uses a yellow or orange color to grab the user's attention.
Error state is used to indicate errors or critical issues. It typically uses a red color to alert the user to a problem.
import React from'react';import { PlusBadge, PlusAvatar } from'@plusui/react';// Plus-Badge with Different Status in ReactconstBadgeWithStatus= () => ( <> <PlusBadgecontent="1"> <PlusAvatarinvertshape="square" /> {/* Default status */} </PlusBadge> <PlusBadgecontent="1"status="info"> <PlusAvatarinvertshape="square" /> {/* Info status */} </PlusBadge> <PlusBadgecontent="1"status="success"> <PlusAvatarinvertshape="square" /> {/* Success status */} </PlusBadge> <PlusBadgecontent="1"status="warning"> <PlusAvatarinvertshape="square" /> {/* Warning status */} </PlusBadge> <PlusBadgecontent="1"status="error"> <PlusAvatarinvertshape="square" /> {/* Error status */} </PlusBadge> </>);exportdefault BadgeWithStatus;
<plus-badgecontent="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Default status --></plus-badge><plus-badgecontent="1"status="info"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Info status --></plus-badge><plus-badgecontent="1"status="success"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Success status --></plus-badge><plus-badgecontent="1"status="warning"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Warning status --></plus-badge><plus-badgecontent="1"status="error"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Error status --></plus-badge>
<template> <plus-badgecontent="1"> <plus-avatarinvertshape="square" /> <!-- Default status --> </plus-badge> <plus-badgecontent="1"status="info"> <plus-avatarinvertshape="square" /> <!-- Info status --> </plus-badge> <plus-badgecontent="1"status="success"> <plus-avatarinvertshape="square" /> <!-- Success status --> </plus-badge> <plus-badgecontent="1"status="warning"> <plus-avatarinvertshape="square" /> <!-- Warning status --> </plus-badge> <plus-badgecontent="1"status="error"> <plus-avatarinvertshape="square" /> <!-- Error status --> </plus-badge></template>
<plus-badgecontent="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Default status --></plus-badge><plus-badgecontent="1"status="info"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Info status --></plus-badge><plus-badgecontent="1"status="success"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Success status --></plus-badge><plus-badgecontent="1"status="warning"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Warning status --></plus-badge><plus-badgecontent="1"status="error"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Error status --></plus-badge>
Size
The Badge component comes in different sizes to accommodate various design needs.
Small
Medium (Default)
Large
You can set the size of a badge using the size prop.
import React from'react';import { PlusBadge, PlusAvatar } from'@plusui/react';// Plus-Badge with Different Sizes in ReactconstBadgeWithSizes= () => ( <> <PlusBadgesize="sm"content="1"> <PlusAvatarinvertshape="square" /> {/* Small badge */} </PlusBadge> <PlusBadgesize="md"content="1"> <PlusAvatarinvertshape="square" /> {/* Medium badge */} </PlusBadge> <PlusBadgesize="lg"content="1"> <PlusAvatarinvertshape="square" /> {/* Large badge */} </PlusBadge> </>);exportdefault BadgeWithSizes;
<plus-badgesize="sm"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Small badge --></plus-badge><plus-badgesize="md"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Medium badge --></plus-badge><plus-badgesize="lg"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Large badge --></plus-badge>
<template> <plus-badgesize="sm"content="1"> <plus-avatarinvertshape="square" /> <!-- Small badge --> </plus-badge> <plus-badgesize="md"content="1"> <plus-avatarinvertshape="square" /> <!-- Medium badge --> </plus-badge> <plus-badgesize="lg"content="1"> <plus-avatarinvertshape="square" /> <!-- Large badge --> </plus-badge></template>
<plus-badgesize="sm"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Small badge --></plus-badge><plus-badgesize="md"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Medium badge --></plus-badge><plus-badgesize="lg"content="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Large badge --></plus-badge>
Invert
The "invert" variant for the badge component offers a striking visual alternative. By applying this variant, the badge's background color is reversed, creating a high-contrast effect. This can be particularly useful for highlighting critical information or drawing attention to specific elements within your application. The "invert" variant provides a distinctive and eye-catching way to convey important messages or statuses.
<plus-badgecontent="1"> <plus-avatarinvertshape="square"></plus-avatar> <!-- Default badge with inverted avatar --></plus-badge><plus-badgecontent="1"invert> <plus-avatarshape="square"></plus-avatar> <!-- Inverted badge with default avatar --></plus-badge>
Layout & Spacing
Layout and spacing for buttons in user interfaces are crucial for usability, aesthetics, and accessibility. By paying attention to the placement and spacing of buttons, designers can create interfaces that are both visually appealing and user-friendly, ultimately enhancing the overall user experience.
Light & Dark Mode
Providing both light and dark modes for buttons in user interfaces enhances user comfort, choice, accessibility, and energy efficiency. It also aligns with contemporary design trends and accommodates a variety of user preferences and needs.
We structured the design system simply switch from the light mode to the dark mode within the Layer > Color section.
Accessibility
Accessibility is not only a moral and legal imperative but also a valuable design principle. Ensuring that buttons in a design system are accessible not only benefits users with disabilities but also leads to a more inclusive, user-friendly, and successful digital product.