Data Presentation

Badge

A badge draws attention to specific information, such as labels and counts. Use badges to display status, notifications, or small pieces of information that need to stand out.

API Reference

Overview

FBadge(style: FBadgeStyle.primary(), child: const Text('Badge'));

CLI

To generate and customize this style:

dart run forui style create badges

Usage

FBadge(...)

FBadge(
  child: const Text('Badge'),
  style: FBadgeStyle.primary(),
);

FBadge.raw(...)

FBadge.raw(
  builder: (context, style) => Text('Badge'),
  style: FBadgeStyle.primary(),
);

Examples

Primary

FBadge(style: FBadgeStyle.primary(), child: const Text('Badge'));

Secondary

FBadge(style: FBadgeStyle.secondary(), child: const Text('Badge'));

Outline

FBadge(style: FBadgeStyle.outline(), child: const Text('Badge'));

Destructive

FBadge(style: FBadgeStyle.destructive(), child: const Text('Badge'));

Avatar

A circular image component that displays user profile pictures with a fallback option. The Avatar component provides a consistent way to represent users in your application, displaying profile images with fallbacks to initials or icons when images are unavailable.

Calendar

A calendar component for selecting and editing dates.

On this page

OverviewCLIUsageFBadge(...)FBadge.raw(...)ExamplesPrimarySecondaryOutlineDestructive