Badge
A compact indicator component for displaying counts, status, or labels
A compact component for displaying counts, status indicators, or labels.
When to use this
- Notification counts: Show unread message or notification counts
- Status indicators: Display online/offline status or alert levels
- Labels: Attach categorical labels to other UI elements
- Counters: Show numerical values in a compact format
Basic implementation
Basic implementation
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class BadgeExample extends StatelessWidget {
const BadgeExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 16,
children: [
RemixBadge(
label: '8',
style: styleLabel,
),
RemixBadge(
style: styleIcon,
child: const Icon(Icons.camera_alt),
),
],
);
}
BadgeStyler get styleLabel {
return BadgeStyler()
.size(24, 24)
.wrap(.clipOval())
.label(
TextStyler()
.fontSize(15)
.textAlign(TextAlign.center)
.fontFeatures([const FontFeature.tabularFigures()]),
)
.labelColor(Colors.greenAccent.shade700)
.labelColor(Colors.white)
.labelFontWeight(FontWeight.bold)
.labelFontSize(15);
}
BadgeStyler get styleIcon {
return BadgeStyler()
.size(24, 24)
.wrap(.clipOval())
.label(
TextStyler()
.fontSize(15)
.textAlign(TextAlign.center)
.fontFeatures([const FontFeature.tabularFigures()]),
)
.labelColor(Colors.redAccent)
.wrap(.iconTheme(color: Colors.white, size: 15));
}
}Fortal widgets
The application-owned Fortal preset provides a themed widget for this component:
Fortal variants
import 'package:flutter/material.dart';
import 'ui/ui.dart';
class FortalBadgeExample extends StatelessWidget {
const FortalBadgeExample({super.key});
@override
Widget build(BuildContext context) {
return Row(
spacing: 16,
children: [
FortalBadge.solid(
label: 'Solid',
),
FortalBadge.soft(
label: 'Soft',
),
FortalBadge.surface(
label: 'Surface',
),
FortalBadge.outline(
label: 'Outline',
),
],
);
}
}See the fortalBadgeStyle source code for all available options.
Default soft badges pair accentA3 fill with accentA11 label — Radix
low-contrast text, not a WCAG AA 4.5:1 guarantee. In light mode some accents
miss 4.5:1 when that label is composited over the fill over
colorPanelSolid. Dark-mode default and highContrast: true (accent12)
pass AA. Use highContrast: true when light-mode soft labels must meet
WCAG AA.
Constructor
Constructor
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
RemixBadge remixBadgeConstructor({
Key? key,
String? label,
Widget? child,
RemixBadgeLabelBuilder? labelBuilder,
BadgeStyler style = const BadgeStyler.create(),
BadgeSpec? styleSpec,
}) => throw UnimplementedError();Properties
Widget Properties
style → BadgeStyler
Optional. The style configuration for the badge. Customize colors, sizing, shape, and state-based styling.
styleSpec → BadgeSpec?
Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
key → Key?
Optional. Controls how one widget replaces another widget in the tree.
label → String?
Optional. Optional text label rendered with the badge text style.
child → Widget?
Optional. Optional fully custom badge content. When provided the badge style is applied only to the container.
labelBuilder → RemixBadgeLabelBuilder?
Optional. Optional builder that receives the resolved [TextSpec] so callers can render text with custom widgets while preserving badge typography.
Style Methods
borderRadius(BorderRadiusGeometryMix radius)
Sets border radius
padding(EdgeInsetsGeometryMix value)
Sets padding
margin(EdgeInsetsGeometryMix value)
Sets margin
decoration(DecorationMix value)
Sets decoration
alignment(Alignment value)
Sets container alignment
label(TextStyler value)
Configures the label text style using a TextStyler.
constraints(BoxConstraintsMix value)
Sets constraints
animate(AnimationConfig value)
Sets animation
wrap(WidgetModifierConfig value)
Applies widget modifiers such as clipping, opacity, or scaling.
foregroundDecoration(DecorationMix value)
Sets a foreground decoration painted on top of the component.
transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)
Applies a matrix transformation to the component.
labelStyle(TextStyleMix value)
Sets label/text style using TextStyleMix directly
labelColor(Color value)
Sets label/text color
labelFontSize(double value)
Sets label/text font size
labelFontWeight(FontWeight value)
Sets label/text font weight
labelFontStyle(FontStyle value)
Sets label/text font style (italic/normal)
labelLetterSpacing(double value)
Sets label/text letter spacing
labelDecoration(TextDecoration value)
Sets label/text decoration (underline, strikethrough, etc.)
labelFontFamily(String value)
Sets label/text font family
labelHeight(double value)
Sets label/text line height
labelWordSpacing(double value)
Sets label/text word spacing
labelDecorationColor(Color value)
Sets label/text decoration color
call({Key? key, String? label, Widget? child, RemixBadgeLabelBuilder? labelBuilder})
Creates a RemixBadge widget with this style applied.