Data display

Badge

A compact label for status, metadata, or categorization.

BadgeView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

BlueGreenOrangeNeutralRed

tsx

import { Badge } from "innate-ui";
import classes from "../docs.module.css";

export function BadgeDemo() {
  return (
    <div class={classes.stack}>
      <Badge tone="blue">Blue</Badge>
      <Badge tone="green">Green</Badge>
      <Badge tone="orange">Orange</Badge>
      <Badge tone="neutral">Neutral</Badge>
      <Badge tone="red">Red</Badge>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

BadgeProps

Prop	Type	Default
`children` Badge content.	`JSX.Children`	`—`
`tone` Visual tone of the badge.	`JSX.ValueOrCell<BadgeTone>`	`"neutral"`

Inspect the typed source →