Badge

Small status indicators and labels with ASCII-style bracket notation.

Docs•API Reference

Colors:

[Default][Primary][Success][Warning][Error]

Variants:

[Square]{Curly}[Square Primary]{Curly Success}

Use Cases:

Status:[ONLINE][OFFLINE][PENDING]
Tags:{NEW}{BETA}{HOT}
Counts:[5][12][0]

Installation

npm install react-ascii-ui

Usage

import { AsciiBadge } from 'react-ascii-ui';

export default function Example() {
  return (
    <div>
      <AsciiBadge>Default</AsciiBadge>
      <AsciiBadge color="success">Success</AsciiBadge>
      <AsciiBadge variant="curly" color="primary">New</AsciiBadge>
    </div>
  );
}

Examples

Basic Badge

[Badge]
<AsciiBadge>Badge</AsciiBadge>

Colors

[Default][Primary][Success][Warning][Error]
<AsciiBadge color="default">Default</AsciiBadge>
<AsciiBadge color="primary">Primary</AsciiBadge>
<AsciiBadge color="success">Success</AsciiBadge>
<AsciiBadge color="warning">Warning</AsciiBadge>
<AsciiBadge color="error">Error</AsciiBadge>

Square vs Curly

[Square]{Curly}
<AsciiBadge variant="square">Square</AsciiBadge>
<AsciiBadge variant="curly">Curly</AsciiBadge>

In Context

Server Status:[ONLINE]
Build #1234[PENDING]
Node.js App{NEW}{STABLE}
<div>
  <span>Server Status:</span>
  <AsciiBadge color="success">ONLINE</AsciiBadge>
</div>
<div>
  <span>Node.js App</span>
  <AsciiBadge variant="curly" color="primary">NEW</AsciiBadge>
  <AsciiBadge variant="curly" color="success">STABLE</AsciiBadge>
</div>

API Reference

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The content displayed inside the badge
variant'square' | 'curly''square'Bracket style - square [text] or curly {text}
color'default' | 'primary' | 'success' | 'warning' | 'error''default'Color theme of the badge
classNamestring""Additional CSS classes

Color Schemes

  • default: White text
  • primary: Blue text
  • success: Green text
  • warning: Yellow text
  • error: Red text

AsciiBadge extends all HTML span attributes and React.HTMLAttributes.