docs

Author: danharrin

docs-assets/app/app/Livewire/PrimesDemo.php

@@ -14,6 +14,7 @@
 use Filament\Support\Enums\FontFamily;
 use Filament\Support\Enums\FontWeight;
 use Filament\Support\Enums\TextSize;
+use Filament\Support\Icons\Heroicon;
 use Illuminate\Support\HtmlString;
 use Livewire\Component;
 
@@ -105,6 +106,17 @@ public function primes(Schema $schema): Schema
                             ->color('warning')
                             ->badge(),
                     ]),
+                Group::make()
+                    ->id('textBadgeIcon')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('Warning')
+                            ->color('warning')
+                            ->badge()
+                            ->icon(Heroicon::ExclamationTriangle),
+                    ]),
             ]);
     }
 

docs-assets/screenshots/images/dark/primes/text/badge-icon.jpg

@@ -1865,6 +1865,15 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'primes/text/badge-icon': {
+        url: 'primes',
+        selector: '#textBadgeIcon',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',

docs-assets/screenshots/images/dark/primes/text/badge.jpg

@@ -5,6 +5,8 @@ import Aside from "@components/Aside.astro"
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 import UtilityInjection from "@components/UtilityInjection.astro"
 
+## Overview
+
 Text can be inserted into a schema using the `Text` component. Text content is passed to the `make()` method:
 
 ```php
@@ -73,8 +75,6 @@ Text::make('Warning')
 
 <AutoScreenshot name="primes/text/badge" alt="Text as badge" version="4.x" />
 
-You may add other things to the badge, like an [icon](../../styling/icons).
-
 Optionally, you may pass a boolean value to control if the text should be in a badge or not:
 
 ```php
@@ -86,3 +86,19 @@ Text::make('Warning')
 ```
 
 <UtilityInjection set="infolistEntries" version="4.x">As well as allowing a static value, the `badge()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+### Adding an icon to a badge
+
+You may add other things to the badge, like an [icon](../../styling/icons):
+
+```php
+use Filament\Schemas\Components\Text;
+use Filament\Support\Icons\Heroicon;
+
+Text::make('Warning')
+    ->color('warning')
+    ->badge()
+    ->icon(Heroicon::ExclamationTriangle)
+```
+
+<AutoScreenshot name="primes/text/badge-icon" alt="Text as badge with an icon" version="4.x" />

docs-assets/screenshots/images/light/primes/text/badge-icon.jpg

@@ -97,7 +97,7 @@
                 \Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
                     'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                     'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
-                ]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
+                ])), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
             }}
         @endif
 
@@ -106,7 +106,7 @@
                 \Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
                     'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                     'wire:target' => $loadingIndicatorTarget,
-                ]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
+                ])), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
             }}
         @endif
     @endif
@@ -166,7 +166,7 @@
                 \Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
                     'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                     'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
-                ]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
+                ])), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
             }}
         @endif
 
@@ -175,7 +175,7 @@
                 \Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
                     'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                     'wire:target' => $loadingIndicatorTarget,
-                ]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
+                ])), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
             }}
         @endif
     @endif