feat(ui): add style and border options to StreamErrorBadge

apps/design_system_gallery/lib/components/badge/stream_error_badge.dart

@@ -21,8 +21,22 @@ Widget buildStreamErrorBadgePlayground(BuildContext context) {
     description: 'The diameter of the badge.',
   );
 
+  final style = context.knobs.object.dropdown<StreamErrorBadgeStyle>(
+    label: 'Style',
+    options: StreamErrorBadgeStyle.values,
+    initialOption: StreamErrorBadgeStyle.error,
+    labelBuilder: (option) => option.name.toUpperCase(),
+    description: 'The severity the badge conveys.',
+  );
+
+  final showBorder = context.knobs.boolean(
+    label: 'Show Border',
+    initialValue: true,
+    description: 'Whether to show a border around the badge.',
+  );
+
   return Center(
-    child: StreamErrorBadge(size: size),
+    child: StreamErrorBadge(size: size, style: style, showBorder: showBorder),
   );
 }
 
@@ -44,10 +58,12 @@ Widget buildStreamErrorBadgeShowcase(BuildContext context) {
     style: textTheme.bodyDefault.copyWith(color: colorScheme.textPrimary),
     child: SingleChildScrollView(
       padding: EdgeInsets.all(spacing.lg),
-      child: const Column(
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          _SizeVariantsSection(),
+          const _SizeVariantsSection(),
+          SizedBox(height: spacing.xl),
+          const _StyleVariantsSection(),
         ],
       ),
     ),
@@ -154,6 +170,109 @@ class _SizeDemo extends StatelessWidget {
   }
 }
 
+// =============================================================================
+// Style Variants Section
+// =============================================================================
+
+class _StyleVariantsSection extends StatelessWidget {
+  const _StyleVariantsSection();
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    final textTheme = context.streamTextTheme;
+    final boxShadow = context.streamBoxShadow;
+    final radius = context.streamRadius;
+    final spacing = context.streamSpacing;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const _SectionLabel(label: 'STYLE VARIANTS'),
+        SizedBox(height: spacing.md),
+        Container(
+          width: double.infinity,
+          clipBehavior: Clip.antiAlias,
+          padding: EdgeInsets.all(spacing.md),
+          decoration: BoxDecoration(
+            color: colorScheme.backgroundSurface,
+            borderRadius: BorderRadius.all(radius.lg),
+            boxShadow: boxShadow.elevation1,
+          ),
+          foregroundDecoration: BoxDecoration(
+            borderRadius: BorderRadius.all(radius.lg),
+            border: Border.all(color: colorScheme.borderSubtle),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Error and warning, each with the border on and off',
+                style: textTheme.captionDefault.copyWith(
+                  color: colorScheme.textSecondary,
+                ),
+              ),
+              SizedBox(height: spacing.md),
+              Row(
+                children: [
+                  for (final style in StreamErrorBadgeStyle.values)
+                    for (final showBorder in [true, false])
+                      Padding(
+                        padding: EdgeInsetsDirectional.only(end: spacing.xl),
+                        child: _StyleDemo(style: style, showBorder: showBorder),
+                      ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _StyleDemo extends StatelessWidget {
+  const _StyleDemo({required this.style, required this.showBorder});
+
+  final StreamErrorBadgeStyle style;
+  final bool showBorder;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    final textTheme = context.streamTextTheme;
+    final spacing = context.streamSpacing;
+
+    return Column(
+      children: [
+        SizedBox(
+          width: 48,
+          height: 48,
+          child: Center(
+            child: StreamErrorBadge(style: style, showBorder: showBorder),
+          ),
+        ),
+        SizedBox(height: spacing.sm),
+        Text(
+          style.name.toUpperCase(),
+          style: textTheme.metadataEmphasis.copyWith(
+            color: colorScheme.accentPrimary,
+            fontFamily: 'monospace',
+          ),
+        ),
+        Text(
+          showBorder ? 'border' : 'no border',
+          style: textTheme.metadataDefault.copyWith(
+            color: colorScheme.textTertiary,
+            fontFamily: 'monospace',
+            fontSize: 10,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
 // =============================================================================
 // Shared Widgets
 // =============================================================================

packages/stream_core_flutter/CHANGELOG.md

@@ -3,6 +3,10 @@
 ### ✨ Features
 
 - Added the `lowBandwidthFill` icon.
+- Added `StreamErrorBadge.style`, taking a `StreamErrorBadgeStyle` — `.error`
+  (the default) or `.warning` — and `StreamErrorBadge.showBorder`.
+- Added `StreamErrorBadgeTheme` and `StreamErrorBadgeThemeData`, carrying a
+  background and foreground color per style.
 
 ## 0.5.1
 

packages/stream_core_flutter/lib/core.dart

@@ -77,6 +77,7 @@ export 'src/theme/components/stream_context_menu_action_theme.dart';
 export 'src/theme/components/stream_context_menu_theme.dart';
 export 'src/theme/components/stream_emoji_button_theme.dart';
 export 'src/theme/components/stream_emoji_chip_theme.dart';
+export 'src/theme/components/stream_error_badge_theme.dart';
 export 'src/theme/components/stream_list_tile_theme.dart';
 export 'src/theme/components/stream_media_viewer_theme.dart';
 export 'src/theme/components/stream_online_indicator_theme.dart';

packages/stream_core_flutter/lib/src/components/badge/stream_error_badge.dart

@@ -1,37 +1,18 @@
 import 'package:flutter/material.dart';
 
 import '../../factory/stream_component_factory.dart';
+import '../../theme/components/stream_error_badge_theme.dart';
+import '../../theme/primitives/stream_colors.dart';
 import '../../theme/primitives/stream_icons.dart';
 import '../../theme/semantics/stream_color_scheme.dart';
 import '../../theme/stream_theme_extensions.dart';
 
-/// Predefined sizes for [StreamErrorBadge].
-///
-/// Each size corresponds to a specific diameter and icon size in logical pixels.
-enum StreamErrorBadgeSize {
-  /// Medium badge (24px diameter, 20px icon).
-  md(24, 20),
-
-  /// Small badge (20px diameter, 16px icon).
-  sm(20, 16),
-
-  /// Extra-small badge (16px diameter, 12px icon).
-  xs(16, 12);
-
-  const StreamErrorBadgeSize(this.value, this.iconSize);
-
-  /// The diameter of the badge in logical pixels.
-  final double value;
-
-  /// The icon size for this badge size.
-  final double iconSize;
-}
-
-/// A circular error badge that displays an exclamation mark icon.
+/// A circular badge that displays an exclamation mark icon.
 ///
 /// [StreamErrorBadge] is used to indicate a failed operation, such as a
 /// message that could not be sent. It renders as a fixed-size circle with
-/// an error-colored background and an exclamation mark icon.
+/// a background colored by [StreamErrorBadgeStyle] and an exclamation mark
+/// icon.
 ///
 /// {@tool snippet}
 ///
@@ -51,17 +32,39 @@ enum StreamErrorBadgeSize {
 /// ```
 /// {@end-tool}
 ///
+/// {@tool snippet}
+///
+/// Warning variant without a border, as a call control button uses it:
+///
+/// ```dart
+/// StreamErrorBadge(
+///   style: StreamErrorBadgeStyle.warning,
+///   showBorder: false,
+/// )
+/// ```
+/// {@end-tool}
+///
+/// ## Theming
+///
+/// [StreamErrorBadge] uses [StreamErrorBadgeThemeData] for default styling.
+/// Colors are determined by the current [StreamColorScheme].
+///
 /// See also:
 ///
 ///  * [StreamErrorBadgeSize], the available size variants.
+///  * [StreamErrorBadgeStyle], the available style variants.
+///  * [StreamErrorBadgeThemeData], for customizing appearance.
+///  * [StreamErrorBadgeTheme], for overriding theme in a subtree.
 ///  * [StreamRetryBadge], a badge for indicating retryable actions.
 ///  * [StreamBadgeNotification], a badge for displaying notification counts.
 class StreamErrorBadge extends StatelessWidget {
   /// Creates an error badge.
   StreamErrorBadge({
     super.key,
     StreamErrorBadgeSize? size,
-  }) : props = .new(size: size);
+    StreamErrorBadgeStyle? style,
+    bool showBorder = true,
+  }) : props = .new(size: size, style: style, showBorder: showBorder);
 
   /// The properties that configure this error badge.
   final StreamErrorBadgeProps props;
@@ -85,18 +88,37 @@ class StreamErrorBadge extends StatelessWidget {
 ///  * [DefaultStreamErrorBadge], the default implementation.
 class StreamErrorBadgeProps {
   /// Creates properties for an error badge.
-  const StreamErrorBadgeProps({this.size});
+  const StreamErrorBadgeProps({
+    this.size,
+    this.style,
+    this.showBorder = true,
+  });
 
   /// The size of the badge.
   ///
-  /// If null, defaults to [StreamErrorBadgeSize.sm].
+  /// If null, uses [StreamErrorBadgeThemeData.size], or falls back to
+  /// [StreamErrorBadgeSize.sm].
   final StreamErrorBadgeSize? size;
+
+  /// The severity the badge conveys.
+  ///
+  /// If null, defaults to [StreamErrorBadgeStyle.error].
+  final StreamErrorBadgeStyle? style;
+
+  /// Whether a border is drawn around the badge.
+  ///
+  /// The border style is determined by [StreamErrorBadgeThemeData.border]. It
+  /// is drawn outside the badge's [size], so it separates the badge from
+  /// whatever it overlaps without changing the badge's layout size. Defaults
+  /// to true.
+  final bool showBorder;
 }
 
 /// The default implementation of [StreamErrorBadge].
 ///
 /// Renders a circular badge with an exclamation mark icon. Styling is
-/// resolved from the current [StreamColorScheme] and [StreamIcons].
+/// resolved from [StreamErrorBadgeThemeData], falling back to the current
+/// [StreamColorScheme] and [StreamIcons].
 ///
 /// See also:
 ///
@@ -112,27 +134,76 @@ class DefaultStreamErrorBadge extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final icons = context.streamIcons;
-    final colorScheme = context.streamColorScheme;
 
-    final effectiveSize = props.size ?? StreamErrorBadgeSize.sm;
+    final theme = context.streamErrorBadgeTheme;
+    final defaults = _StreamErrorBadgeThemeDefaults(context);
 
-    final border = Border.all(
-      width: 2,
-      color: colorScheme.borderOnInverse,
-      strokeAlign: BorderSide.strokeAlignOutside,
-    );
+    final effectiveSize = props.size ?? theme.size ?? defaults.size;
+    final effectiveStyle = props.style ?? StreamErrorBadgeStyle.error;
+    final effectiveBorder = props.showBorder ? theme.border ?? defaults.border : null;
+
+    final effectiveBackgroundColor = _resolveBackgroundColor(effectiveStyle, theme, defaults);
+    final effectiveForegroundColor = _resolveForegroundColor(effectiveStyle, theme, defaults);
 
     return AnimatedContainer(
       width: effectiveSize.value,
       height: effectiveSize.value,
       clipBehavior: Clip.antiAlias,
       duration: kThemeChangeDuration,
-      decoration: BoxDecoration(shape: BoxShape.circle, color: colorScheme.accentError),
-      foregroundDecoration: BoxDecoration(shape: BoxShape.circle, border: border),
+      decoration: BoxDecoration(shape: BoxShape.circle, color: effectiveBackgroundColor),
+      foregroundDecoration: BoxDecoration(shape: BoxShape.circle, border: effectiveBorder),
       child: IconTheme(
-        data: .new(size: effectiveSize.iconSize, color: colorScheme.textOnAccent),
+        data: .new(size: effectiveSize.iconSize, color: effectiveForegroundColor),
         child: Center(child: Icon(icons.exclamationMarkFill)),
       ),
     );
   }
+
+  Color _resolveBackgroundColor(
+    StreamErrorBadgeStyle style,
+    StreamErrorBadgeThemeData theme,
+    _StreamErrorBadgeThemeDefaults defaults,
+  ) => switch (style) {
+    .error => theme.errorBackgroundColor ?? defaults.errorBackgroundColor,
+    .warning => theme.warningBackgroundColor ?? defaults.warningBackgroundColor,
+  };
+
+  Color _resolveForegroundColor(
+    StreamErrorBadgeStyle style,
+    StreamErrorBadgeThemeData theme,
+    _StreamErrorBadgeThemeDefaults defaults,
+  ) => switch (style) {
+    .error => theme.errorForegroundColor ?? defaults.errorForegroundColor,
+    .warning => theme.warningForegroundColor ?? defaults.warningForegroundColor,
+  };
+}
+
+class _StreamErrorBadgeThemeDefaults extends StreamErrorBadgeThemeData {
+  _StreamErrorBadgeThemeDefaults(this._context);
+
+  final BuildContext _context;
+
+  late final _colorScheme = _context.streamColorScheme;
+
+  @override
+  StreamErrorBadgeSize get size => .sm;
+
+  @override
+  Color get errorBackgroundColor => _colorScheme.accentError;
+
+  @override
+  Color get errorForegroundColor => _colorScheme.textOnAccent;
+
+  @override
+  Color get warningBackgroundColor => _colorScheme.accentWarning;
+
+  @override
+  Color get warningForegroundColor => StreamColors.black;
+
+  @override
+  BoxBorder get border => Border.all(
+    width: 2,
+    color: _colorScheme.borderOnInverse,
+    strokeAlign: BorderSide.strokeAlignOutside,
+  );
 }