ComponentsBadge
Badge
stableInline colored label with semantic variants driven by the theme.
Browser preview is a simulation. The copied component runs in actual terminal apps.
badge.tsx
[default][success][warning][error][info]
badge.tsx
Installation
npx orizen-tui@latest add badge
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/badge.tsx
Usage
badge.imports.tsx
badge.example.tsx
Examples
Variants
badge.example1.tsx
[default][success][warning][error][info]
badge.example1.tsx
API Reference
Badge
PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'error' | 'info''default'Visual variant
variant'default'
'default' | 'success' | 'warning' | 'error' | 'info'Visual variant
childrenReact.ReactNode-Badge content
children-
React.ReactNodeBadge content