Badge

A compact status badge with semantic color variants. Uses inverse terminal colors for a filled-pill look that stands out in any output.

Live Preview

Badge · variants
v2.1.0betaarchivednewstable

~/my-cli — node v22● running

Installation

npx inkui add badge

Usage

import { Badge } from './components/ui/badge';
 
export default function App() {
  return <Badge variant="success">deployed</Badge>;
}

Examples

All variants

<Badge variant="default">unknown</Badge>
<Badge variant="success">deployed</Badge>
<Badge variant="warning">degraded</Badge>
<Badge variant="error">failed</Badge>
<Badge variant="info">pending</Badge>

In context

function ServiceStatus() {
  return (
    <>
      <Text>API Gateway </Text><Badge variant="success">healthy</Badge>
      <Text>Database    </Text><Badge variant="warning">degraded</Badge>
      <Text>CDN         </Text><Badge variant="error">down</Badge>
    </>
  );
}

Props

Prop	Type	Default	Description
`children`	`string`	—	Badge label text (required)
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Color variant
`theme`	`InkUITheme`	`darkTheme`	Color theme

Installation

Usage

Examples

All variants

In context

Props

On this page