@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiBadge


Package: @uireact/badge

v3.0.15

Component used to highlight categories or labels in a given context

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/badge

#

Usage

  <>
    <UiSpacing margin={{ block: 'three' }}>
      <UiBadge size="xlarge">✈️ Primary</UiBadge>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiBadge category="secondary" size="large">
        <UiIcon icon="BadgeCheck" category="secondary" /> Secondary with icon
      </UiBadge>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiBadge category="tertiary" size="regular">
        🚀 Tertiary
      </UiBadge>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiBadge category="positive">✅ Positive</UiBadge>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiBadge category="warning" size="xsmall">
        🚨 Warning
      </UiBadge>
    </UiSpacing>
  </>

Props