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.

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.

idstringundefinedfalse

ID of the root HTML element.

labelstringtrue

Text to be displayed.

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

Visual priority to highlight or suppress the badge.