Edit page

Badge

Badge highlights content with short additional information.

Basic Usage

To implement the Badge component, you need to import it first:

import { Badge } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

Use badges to highlight content with a short and brief additional information: a number, a word, but no more than two words.

Priorities

There are two visual priorities of badges to choose from, from highest to lowest:

  1. filled
  2. outline

All priorities come in supported component colors.

Filled

High-emphasis priority to draw user's attention.

Outline

Medium-emphasis priority to provide additional context in an unobtrusive way.

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify React synthetic events or any HTML attribute you like. All attributes that don't interfere with the API are forwarded to the root <div> HTML element. This enables making the component interactive and helps to improve its accessibility.

👉 Refer to the MDN reference for the full list of supported attributes of the div element.

API

Prop nameTypeDefaultRequiredDescription
color'primary' │ 'secondary' │ 'success' │ 'warning' │ 'danger' │ 'help' │ 'info' │ 'note' │ 'light' │ 'dark''note'false

Color variant to clarify importance and meaning of the badge.

labelstringtrue

Text to be displayed.

priority'filled' │ 'outline''filled'false

Visual priority to highlight or suppress the badge.