Badge on Page Header Action display issue
Does everyone else see the same display issue if they try and put a badge on a regular list page header action button:
protected function getHeaderActions() : array
{
return [
Action::make('goToHelpDesk')
->label('Go to Help Desk')
->url(route('filament.customer.resources.helpdesk.index'))
->icon('phosphor-user-sound-duotone')
->tooltip('Access Help Desk to review or open new Support Tickets')
->badge(10)
->badgeColor('danger')
->color('primary'),
//
];
}
protected function getHeaderActions() : array
{
return [
Action::make('goToHelpDesk')
->label('Go to Help Desk')
->url(route('filament.customer.resources.helpdesk.index'))
->icon('phosphor-user-sound-duotone')
->tooltip('Access Help Desk to review or open new Support Tickets')
->badge(10)
->badgeColor('danger')
->color('primary'),
//
];
}
2 Replies
Not sen this before... inspect what's causing it on the icon with the browser /css
<div class="fi-btn-badge-ctn absolute start-full top-0 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white dark:bg-gray-900 rtl:translate-x-1/2">
<span
style="--c-50:var(--danger-50); --c-400:var(--danger-400); --c-600:var(--danger-600);"
class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-0.5 min-w-[theme(spacing.4)] tracking-tighter fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-danger"
>
<span class="grid">
<span class="truncate">
10
</span>
</span>
</span>
</div>
<div class="fi-btn-badge-ctn absolute start-full top-0 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white dark:bg-gray-900 rtl:translate-x-1/2">
<span
style="--c-50:var(--danger-50); --c-400:var(--danger-400); --c-600:var(--danger-600);"
class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-0.5 min-w-[theme(spacing.4)] tracking-tighter fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-danger"
>
<span class="grid">
<span class="truncate">
10
</span>
</span>
</span>
</div>