Button

In ProgressDark modeRTL

A clickable button widget with multiple variants and sizes.

7:21

Default

Destructive

Outline

Secondary

Ghost

Link

Installation

Copy the component into your project using the CLI:

$ronakcn add button

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/button/button.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnButton Example')),
      body: Center(
        child: RcnButton(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Button ships with the following variants:

default

The default button style.

7:21

Default

destructive

Used for destructive actions like delete.

7:21

Destructive

outline

A button with an outline border.

7:21

Outline

secondary

A secondary action button.

7:21

Secondary

ghost

A ghost button with no background.

7:21

Ghost

link

A button that looks like a link.

7:21

Link

Props

Prop	Type	Default	Description
`onPressed`	`VoidCallback?`	`null`	Called when the button is tapped.
`variant`	`ButtonVariant`	`ButtonVariant.defaultVariant`	The visual style of the button.
`size`	`ButtonSize`	`ButtonSize.md`	The size of the button.
`disabled`	`bool`	`false`	Whether the button is disabled.
`loading`	`bool`	`false`	Shows a loading spinner when true.
`child`*	`Widget`	—	The widget to display inside the button.

Source files

lib/components/ui/button.dart

import 'package:flutter/material.dart';

enum ButtonVariant { defaultVariant, destructive, outline, secondary, ghost, link }
enum ButtonSize { sm, md, lg, icon }

class RnButton extends StatelessWidget {
  const RnButton({
    super.key,
    required this.child,
    this.onPressed,
    this.variant = ButtonVariant.defaultVariant,
    this.size = ButtonSize.md,
    this.disabled = false,
    this.loading = false,
  });

  final Widget child;
  final VoidCallback? onPressed;
  final ButtonVariant variant;
  final ButtonSize size;
  final bool disabled;
  final bool loading;

  @override
  Widget build(BuildContext context) {
    return FilledButton(
      onPressed: disabled || loading ? null : onPressed,
      child: loading
          ? const SizedBox(
              width: 16,
              height: 16,
              child: CircularProgressIndicator(strokeWidth: 2),
            )
          : child,
    );
  }
}

Version 0.1.0 · input category