Plus UI ↗️Be Our Sponsor ↗️

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.

anatomy of badge component

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;

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.

layout and spacing of badge component

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.

light and dark mode of badge component

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.

AA ~ AAA

Design System

LogoPlus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma

API

Property
Description
Type
Accepted Values
Default

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

PreviousAvatarNextButton

Last updated

Was this helpful?