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 NeobrutalismBadges1Example extends StatelessWidget {
  const NeobrutalismBadges1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: const [
        Style(
          'border-2 border-black bg-blue-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-blue-800 dark:text-white dark:shadow-white',
          display: DisplayType.inline,
          child: Text('Info'),
        ),
        Style(
          'border-2 border-black bg-green-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-green-800 dark:text-white dark:shadow-white',
          display: DisplayType.inline,
          child: Text('Success'),
        ),
        Style(
          'border-2 border-black bg-red-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-red-800 dark:text-white dark:shadow-white',
          display: DisplayType.inline,
          child: Text('Error'),
        ),
      ],
    );
  }
}

Base with status

Section titled “Base with status”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-wrap justify-center gap-4 p-6',
      children: [
        Style(
          'inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white',
          children: const [
            Style('size-2 bg-green-600 dark:bg-green-300'),
            Text('Success'),
          ],
        ),
        Style(
          'inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white',
          children: const [
            Style('size-2 bg-red-600 dark:bg-red-300'),
            Text('Error'),
          ],
        ),
      ],
    );
  }
}

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));
  }
}


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


  static const _xMarkSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'inline-flex items-center gap-3 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white',
        children: [
          const Text('New Message'),
          Style(
            'bg-black p-0.5 text-white shadow-[2px_2px_0_0] shadow-black hover:translate-0.5 hover:shadow-none focus:ring-2 focus:ring-yellow-300 dark:bg-white dark:text-gray-900 dark:shadow-white dark:focus:ring-yellow-600',
            child: Style('size-4', child: CurrentColorIcon(_xMarkSvg)),
          ),
        ],
      ),
    );
  }
}