badge-ui v0.0.3-md

Badge Component Explanation and Guide

The Badge component is a React component that allows you to easily create badges with different styles. Depending on different color modes, it displays a badge for the selected text.

Language

• English
• 日本語

Package Information

For the latest package information, please check the GitHub readme.

Table of Contents

• Badge Component
• Table of Contents
• Installation
  • npm
  • yarn
  • Component not generating?
• Change Log
• ui
• Properties
  • mode
  • children
• Usage Examples
• Notes
• Advantages
• Contributors

Installation

npm

npm i badge-ui

yarn

yarn add badge-ui

Component not generating?

Run the following command in the project's root directory:

node ./node_modules/badge-ui/install-package.js

Change Log

• 0.0.1
  • Added module for displaying badges
• 0.0.2
  • Fixed error issues
• 0.0.3
  • Added mode 'blue'

UI

Properties

mode (required)

Specify the display mode of the badge. The default is default. Supported modes are default, dark, blue, red, green, yellow, indigo, purple, pink.

children (required)

Specify the text or elements to be displayed inside the badge.

Usage Examples

<Badge mode="default">default</Badge>
<Badge mode="dark">dark</Badge>
<Badge mode="blue">blue</Badge>
<Badge mode="red">red</Badge>
<Badge mode="green">green</Badge>
<Badge mode="yellow">yellow</Badge>
<Badge mode="indigo">indigo</Badge>
<Badge mode="purple">purple</Badge>
<Badge mode="pink">pink</Badge>

Notes

Please do not pass values other than the specified modes to the mode property. If a value other than the supported modes is passed, the default style will be applied.

Now you can effectively use the Badge component. If you have any additional information or questions, please let us know.

Advantages

• High visibility
• Easily customizable
• Can be created with short code

Contributors

• Fun117

Translation: ChatGPT 3.5