Badge

In ProgressDark modeRTL

A small status indicator with multiple variants.

7:21

Default

Secondary

Destructive

Outline

Success

Warning

v0.1.0

Flutter

Dart

Open Source

Installation

Copy the component into your project using the CLI:

$ronakcn add badge

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

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

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

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

Variants

Badge ships with the following variants:

default

The default filled badge.

7:21

Default

secondary

A secondary muted badge.

7:21

Secondary

destructive

A red destructive badge.

7:21

Destructive

outline

A badge with only a border.

7:21

Outline

success

A green success badge.

7:21

Success

warning

An amber warning badge.

7:21

Warning

Props

Prop	Type	Default	Description
`label`*	`String`	—	Text displayed inside the badge.
`variant`	`BadgeVariant`	`BadgeVariant.defaultVariant`	Visual style of the badge.

Source files

lib/components/ui/badge.dart

import 'package:flutter/material.dart';

enum BadgeVariant { defaultVariant, secondary, destructive, outline }

class RnBadge extends StatelessWidget {
  const RnBadge({
    super.key,
    required this.label,
    this.variant = BadgeVariant.defaultVariant,
  });

  final String label;
  final BadgeVariant variant;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.primary,
        borderRadius: BorderRadius.circular(9999),
      ),
      child: Text(
        label,
        style: TextStyle(
          color: Theme.of(context).colorScheme.onPrimary,
          fontSize: 12,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}

Version 0.1.0 · display category