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
Status
Size
Invert
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;
<plus-badge>
<plus-avatar invert shape="square"></plus-avatar> <!-- Badge without content -->
</plus-badge>
<plus-badge content="1">
<plus-avatar invert shape="square"></plus-avatar> <!-- Badge with numeric content -->
</plus-badge>
<plus-badge content="New">
<plus-avatar invert shape="square"></plus-avatar> <!-- Badge with text content -->
</plus-badge>
<template>
<plus-badge>
<plus-avatar invert shape="square" /> <!-- Badge without content -->
</plus-badge>
<plus-badge content="1">
<plus-avatar invert shape="square" /> <!-- Badge with numeric content -->
</plus-badge>
<plus-badge content="New">
<plus-avatar invert shape="square" /> <!-- Badge with text content -->
</plus-badge>
</template>
<plus-badge>
<plus-avatar invert shape="square"></plus-avatar> <!-- Badge without content -->
</plus-badge>
<plus-badge content="1">
<plus-avatar invert shape="square"></plus-avatar> <!-- Badge with numeric content -->
</plus-badge>
<plus-badge content="New">
<plus-avatar invert shape="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 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;
<plus-badge content="1">
<plus-avatar invert shape="square"></plus-avatar> <!-- Default status -->
</plus-badge>
<plus-badge content="1" status="info">
<plus-avatar invert shape="square"></plus-avatar> <!-- Info status -->
</plus-badge>
<plus-badge content="1" status="success">
<plus-avatar invert shape="square"></plus-avatar> <!-- Success status -->
</plus-badge>
<plus-badge content="1" status="warning">
<plus-avatar invert shape="square"></plus-avatar> <!-- Warning status -->
</plus-badge>
<plus-badge content="1" status="error">
<plus-avatar invert shape="square"></plus-avatar> <!-- Error status -->
</plus-badge>
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.
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.
Criteria
Description
Status
ARIA Attributes
Ensures ARIA attributes are allowed for an element's role
Passed
ARIA Role
Ensures role attribute has an appropriate value for the element
Passed
ARIA Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Passed
Required ARIA Attribute
Ensures elements with ARIA roles have all required ARIA attributes
Passed
Valid Values
Ensures all elements with a role attribute use a valid value
Passed
Valid Values ARIA Attributes
Ensures all ARIA attributes have valid values
Passed
Valid Names
Ensures attributes that begin with aria- are valid ARIA attributes
Passed
ID Attribute
Ensures every id attribute value is unique
Passed
Color Constrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
