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

Buttons

Ported from HyperUI’s Buttons — see Attribution.

Base

Section titled “Base”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: const Style(
        'border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        child: Text('Click Here'),
      ),
    );
  }
}

Pressed

Section titled “Pressed”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: const Style(
        'border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        child: Text('Click Here'),
      ),
    );
  }
}

Pressed with inset

Section titled “Pressed with inset”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: const Style(
        'border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-[-1px_-1px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        child: Text('Click Here'),
      ),
    );
  }
}

Underlined

Section titled “Underlined”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'relative bg-white px-5 py-3 font-semibold text-black after:absolute after:inset-x-0 after:bottom-0 after:h-1 after:bg-black hover:text-white hover:after:h-full focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:bg-gray-900 dark:text-white dark:after:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        child: const Style('relative z-10', child: Text('Click Here')),
      ),
    );
  }
}

Double border

Section titled “Double border”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: const Style(
        'border-2 border-black bg-white px-5 py-3 font-semibold text-black ring-2 ring-black ring-offset-2 ring-offset-yellow-300 hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:ring-white dark:ring-offset-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        child: Text('Click Here'),
      ),
    );
  }
}