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.

React

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;

Angular

<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>

Vue

<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>

Javascript

<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.

React

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;

Angular

<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>

Vue

<template>
  <plus-badge content="1">
    <plus-avatar invert shape="square" />  <!-- Default status -->
  </plus-badge>
  
  <plus-badge content="1" status="info">
    <plus-avatar invert shape="square" />  <!-- Info status -->
  </plus-badge>
  
  <plus-badge content="1" status="success">
    <plus-avatar invert shape="square" />  <!-- Success status -->
  </plus-badge>
  
  <plus-badge content="1" status="warning">
    <plus-avatar invert shape="square" />  <!-- Warning status -->
  </plus-badge>
  
  <plus-badge content="1" status="error">
    <plus-avatar invert shape="square" />  <!-- Error status -->
  </plus-badge>
</template>

Javascript

<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>

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.

React

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;

Angular

<plus-badge size="sm" content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Small badge -->
</plus-badge>

<plus-badge size="md" content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Medium badge -->
</plus-badge>

<plus-badge size="lg" content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Large badge -->
</plus-badge>

Vue

<template>
  <plus-badge size="sm" content="1">
    <plus-avatar invert shape="square" />  <!-- Small badge -->
  </plus-badge>
  
  <plus-badge size="md" content="1">
    <plus-avatar invert shape="square" />  <!-- Medium badge -->
  </plus-badge>
  
  <plus-badge size="lg" content="1">
    <plus-avatar invert shape="square" />  <!-- Large badge -->
  </plus-badge>
</template>

Javascript

<plus-badge size="sm" content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Small badge -->
</plus-badge>

<plus-badge size="md" content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Medium badge -->
</plus-badge>

<plus-badge size="lg" content="1">
  <plus-avatar invert shape="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.

React

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;

Angular

<plus-badge content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Default badge with inverted avatar -->
</plus-badge>

<plus-badge content="1" invert>
  <plus-avatar shape="square"></plus-avatar>  <!-- Inverted badge with default avatar -->
</plus-badge>

Vue

<template>
  <plus-badge content="1">
    <plus-avatar invert shape="square" />  <!-- Default badge with inverted avatar -->
  </plus-badge>
  
  <plus-badge content="1" invert>
    <plus-avatar shape="square" />  <!-- Inverted badge with default avatar -->
  </plus-badge>
</template>

Javascript

<plus-badge content="1">
  <plus-avatar invert shape="square"></plus-avatar>  <!-- Default badge with inverted avatar -->
</plus-badge>

<plus-badge content="1" invert>
  <plus-avatar shape="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.

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

Plus 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