Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Badges

Ported from HyperUI’s Badges — see Attribution.

Base

Section titled “Base”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Badges1Example extends StatelessWidget {
  const Badges1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [
        Style(
          'rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:bg-purple-700 dark:text-purple-100',
          display: DisplayType.inline,
          child: Text('Live'),
        ),
        Style(
          'rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:text-purple-100',
          display: DisplayType.inline,
          child: Text('Live'),
        ),
      ],
    );
  }
}

Base with icon

Section titled “Base with icon”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _euroSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>''';


class Badges2Example extends StatelessWidget {
  const Badges2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [
        Style(
          'inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100',
          children: [
            Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_euroSvg)),
            Style('text-sm whitespace-nowrap', child: Text('Euro')),
          ],
        ),
        Style(
          'inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100',
          children: [
            Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_euroSvg)),
            Style('text-sm whitespace-nowrap', child: Text('Euro')),
          ],
        ),
      ],
    );
  }
}

Base with dismiss

Section titled “Base with dismiss”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _dismissSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>''';


class Badges3Example extends StatelessWidget {
  const Badges3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [_FilledBadge(), _OutlinedBadge()],
    );
  }
}


class _FilledBadge extends StatelessWidget {
  const _FilledBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100',
      children: const [
        Style('text-sm whitespace-nowrap', child: Text('Euro')),
        Style(
          'ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900',
          children: [
            Style('sr-only', child: Text('Remove badge')),
            Style('size-3', child: CurrentColorIcon(_dismissSvg)),
          ],
        ),
      ],
    );
  }
}


class _OutlinedBadge extends StatelessWidget {
  const _OutlinedBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100',
      children: const [
        Style('text-sm whitespace-nowrap', child: Text('Euro')),
        Style(
          'ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900',
          children: [
            Style('sr-only', child: Text('Remove badge')),
            Style('size-3', child: CurrentColorIcon(_dismissSvg)),
          ],
        ),
      ],
    );
  }
}

Icon only

Section titled “Icon only”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _euroSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>''';


class Badges4Example extends StatelessWidget {
  const Badges4Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [
        Style(
          'inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700 dark:bg-purple-700 dark:text-purple-100',
          child: Style('size-4', child: CurrentColorIcon(_euroSvg)),
        ),
        Style(
          'inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700 dark:text-purple-100',
          child: Style('size-4', child: CurrentColorIcon(_euroSvg)),
        ),
      ],
    );
  }
}

Themed with icon

Section titled “Themed with icon”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _checkCircleSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>''';


const _refundSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z"/></svg>''';


const _warningSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>''';


class Badges5Example extends StatelessWidget {
  const Badges5Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [
        _EmeraldFilledBadge(),
        _EmeraldOutlinedBadge(),
        _AmberFilledBadge(),
        _AmberOutlinedBadge(),
        _RedFilledBadge(),
        _RedOutlinedBadge(),
      ],
    );
  }
}


class _EmeraldFilledBadge extends StatelessWidget {
  const _EmeraldFilledBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_checkCircleSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Paid')),
      ],
    );
  }
}


class _EmeraldOutlinedBadge extends StatelessWidget {
  const _EmeraldOutlinedBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_checkCircleSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Paid')),
      ],
    );
  }
}


class _AmberFilledBadge extends StatelessWidget {
  const _AmberFilledBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700 dark:bg-amber-700 dark:text-amber-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_refundSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Refunded')),
      ],
    );
  }
}


class _AmberOutlinedBadge extends StatelessWidget {
  const _AmberOutlinedBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700 dark:text-amber-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_refundSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Refunded')),
      ],
    );
  }
}


class _RedFilledBadge extends StatelessWidget {
  const _RedFilledBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700 dark:bg-red-700 dark:text-red-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_warningSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Failed')),
      ],
    );
  }
}


class _RedOutlinedBadge extends StatelessWidget {
  const _RedOutlinedBadge();


  @override
  Widget build(BuildContext context) {
    return Style(
      'inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700 dark:text-red-100',
      children: const [
        Style('-ms-1 me-1.5 size-4', child: CurrentColorIcon(_warningSvg)),
        Style('text-sm whitespace-nowrap', child: Text('Failed')),
      ],
    );
  }
}