Badge

A styled inline label with powerline-inspired glyph borders.

Badge renders text with a colored background and optional decorative edges. Three variants are available: round uses rounded powerline glyphs, arrow uses angled glyphs, and plain renders a simple padded block with no glyphs.

Colors default to the theme's accentColor for the background and black for the text. Override with the color and background props.

import { Badge } from 'giggles/ui';

function StatusBar() {
  return (
    <Box gap={1}>
      <Badge>stable</Badge>
      <Badge background="#E06C75">error</Badge>
      <Badge variant="arrow">deploy</Badge>
    </Box>
  );
}

API Reference

Badge