Status
Badge
LiqBadge is the iOS 26 pill-shaped count or status indicator. It accepts an
optional free-form label, an optional numeric counter, and a dot flag that
collapses the pill into an 8×8 circle. The variant chooses one of five
system colors for the background and a matching foreground.
Counter
import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget badgeCounterBuilder(BuildContext context) { return const SnippetFrame( height: 88, surface: SnippetFrameSurface.themed, surfacePadding: EdgeInsets.symmetric(horizontal: 18), child: Wrap( spacing: 8, runSpacing: 8, children: <Widget>[ LiqBadge(count: 3, variant: LiqBadgeVariant.primary), LiqBadge(count: 12), LiqBadge(count: 250, variant: LiqBadgeVariant.destructive), ], ), );}Status
import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget badgeStatusBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 360, height: 88, surface: SnippetFrameSurface.themed, surfacePadding: EdgeInsets.symmetric(horizontal: 18), child: Wrap( spacing: 8, runSpacing: 8, children: <Widget>[ LiqBadge(label: 'New', variant: LiqBadgeVariant.primary), LiqBadge(label: 'Online', variant: LiqBadgeVariant.success), LiqBadge(label: 'Beta', variant: LiqBadgeVariant.warning), LiqBadge(label: 'Failed', variant: LiqBadgeVariant.destructive), LiqBadge(label: 'Draft'), ], ), );}Dot
import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget badgeDotBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 220, height: 72, surface: SnippetFrameSurface.themed, surfacePadding: EdgeInsets.symmetric(horizontal: 18), child: Wrap( spacing: 12, children: <Widget>[ LiqBadge(dot: true, variant: LiqBadgeVariant.primary), LiqBadge(dot: true, variant: LiqBadgeVariant.success), LiqBadge(dot: true, variant: LiqBadgeVariant.warning), LiqBadge(dot: true, variant: LiqBadgeVariant.destructive), ], ), );}