Badge

A short inline tag - a count, a state, a version.

import { Badge } from '@textui/core';

<Badge label="running" tone="success" />

Props

| Prop | Type | Default | | | — | — | — | — | | label | string | required | | | tone | 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'muted' | 'default' | | | variant | 'solid' \| 'outline' \| 'ghost' \| 'link' | 'ghost' | | | icon | string | | Glyph before the label, so the badge reads without colour. |

Plus everything on BoxProps.

A badge is inline and stays one row, which is why its outline variant is brackets rather than a box: a drawn frame would make it three rows and it would stop sitting inside a line of text.

Otherwise it shares Button’s vocabulary - the same tone scale, the same variant names - because a reader should not have to learn two.

See also

  • StatusDot - a state as a glyph, which survives losing colour
  • Button - the same tones, but focusable

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.