Badge
Badge produces a tiny emblem on the upper-right side of its offspring.
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.
Default
Default
Small
True
Number
Info
Medium
False
Icon
Success
Large
Text
Warning
Error
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 React
const BadgeExamples = () => (
<>
<PlusBadge>
<PlusAvatar invert shape="square" /> {/* Badge without content */}
</PlusBadge>
<PlusBadge content="1">
<PlusAvatar invert shape="square" /> {/* Badge with numeric content */}
</PlusBadge>
<PlusBadge content="New">
<PlusAvatar invert shape="square" /> {/* Badge with text content */}
</PlusBadge>
</>
);
export default BadgeExamples;
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 React
const BadgeWithStatus = () => (
<>
<PlusBadge content="1">
<PlusAvatar invert shape="square" /> {/* Default status */}
</PlusBadge>
<PlusBadge content="1" status="info">
<PlusAvatar invert shape="square" /> {/* Info status */}
</PlusBadge>
<PlusBadge content="1" status="success">
<PlusAvatar invert shape="square" /> {/* Success status */}
</PlusBadge>
<PlusBadge content="1" status="warning">
<PlusAvatar invert shape="square" /> {/* Warning status */}
</PlusBadge>
<PlusBadge content="1" status="error">
<PlusAvatar invert shape="square" /> {/* Error status */}
</PlusBadge>
</>
);
export default BadgeWithStatus;
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 React
const BadgeWithSizes = () => (
<>
<PlusBadge size="sm" content="1">
<PlusAvatar invert shape="square" /> {/* Small badge */}
</PlusBadge>
<PlusBadge size="md" content="1">
<PlusAvatar invert shape="square" /> {/* Medium badge */}
</PlusBadge>
<PlusBadge size="lg" content="1">
<PlusAvatar invert shape="square" /> {/* Large badge */}
</PlusBadge>
</>
);
export default BadgeWithSizes;
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.
import React from 'react';
import { PlusBadge, PlusAvatar } from '@plusui/react';
const App = () => (
<>
<PlusBadge content="1">
<PlusAvatar invert shape="square" /> {/* Default badge with inverted avatar */}
</PlusBadge>
<PlusBadge content="1" invert>
<PlusAvatar shape="square" /> {/* Inverted badge with default avatar */}
</PlusBadge>
</>
);
export default App;
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.

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.
ARIA Attributes
Ensures ARIA attributes are allowed for an element's role
ARIA Role
Ensures role attribute has an appropriate value for the element
ARIA Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Required ARIA Attribute
Ensures elements with ARIA roles have all required ARIA attributes
Valid Values
Ensures all elements with a role attribute use a valid value
Valid Values ARIA Attributes
Ensures all ARIA attributes have valid values
Valid Names
Ensures attributes that begin with aria- are valid ARIA attributes
ID Attribute
Ensures every id attribute value is unique
Color Constrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Design System
API
content
Badge content
String, Number
—
—
size
Badge size
String
sm, md, lg
md
status
Badge status
String
success, warning, info, error
—
offset
Badge offset
String
—
—
invert
Badge invert
Boolean
—
false
Last updated
Was this helpful?