Add support for badges on buttons, menu items and other components

[mauritskorse]

The avatar and navigation items have a badge option. It would be great if we could add this badge/indicator to other components and keep things consistent.
Currently I have an indicator on some buttons to show that a filter is set:

<flux:field class="w-96">
        <flux:dropdown position="bottom end" x-data="{ files: false, wiki: false, blog: false, search: '' }">
            <flux:input icon="magnifying-glass" x-model="search" placeholder="Search">
                <x-slot name="iconTrailing">
                    <flux:button size="sm" variant="subtle" class="!px-2">
                        <flux:icon  icon="funnel" size="sm" />
                        <div x-show="files || wiki || blog" class="
                            absolute ring-[2px] ring-white dark:ring-zinc-900 z-10 
                            min-h-2 min-w-2 
                            flex items-center justify-center tabular-nums overflow-hidden 
                            text-[.625rem] text-zinc-800 dark:text-white font-medium
                            rounded-full
                            top-0 right-0
                            bg-orange-500 dark:bg-orange-400
                            "></div>
                    </flux:button>
                </x-slot>
            </flux:input>
            
            <flux:menu>
                <flux:menu.checkbox x-model="files">Files</flux:menu.checkbox>
                <flux:menu.checkbox x-model="wiki">Wiki</flux:menu.checkbox>
                <flux:menu.checkbox x-model="blog">Blog</flux:menu.checkbox>
            </flux:menu>

        </flux:dropdown>
    </flux:field>