Flux Docs missing info about icons
Opened this issue · 4 comments
rolandorojas commented
It seems that we're lacking context about icon options in Flux. The AI keeps making up icon names that do not actually exist. For example:
<flux:button icon="download" wire:click="export">{{ __('Export to Excel') }}</flux:button>
There is no "download" icon. The closest would be "arrow-down-tray."
Now, the Boost docs do not actually include a list of available icon names. It just points to https://heroicons.com/ for a list of available values. Perhaps we need to list all available Heroicons and pass that list to Boost.
cyppe commented
Speaking of boost docs and flux. Cursor just asked for some docs, and it just returned truncated (too much tags) about wrong components also. Would make sense if it was cleaned up data to save tokens.
Called search-docs:
{
"queries": [
"flux button size prop",
"flux button size variants"
]
}
# Documentation Search Results
**Packages:** livewire/flux (2.x), livewire/flux-pro (2.x)
**Results:** 5 documents, 2 chunks
---
## components/avatar
_Package: livewire/flux | Versions: ["2.x"]_
_Source: https://fluxui.dev/components/avatar#livewire/flux_
### components/avatar Examples
<h2 data-aside-title="2" data-aside-label="Examples">
Examples
</h2>
<div>
<h3 id="testimonial" data-aside-title="3"><a href="#testimonial">Testimonial</a></h3>
<div>
<p></p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>div</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"xl"</span><span> class</span><span>=</span><span>"mt-4 italic"</span><span>></span></span><span><span> <</span><span>p</span><span>></span><span>IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥</span><span></</span><span>p</span><span>></span></span><span><span> </</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"mt-6 flex items-center gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/taylorotwell"</span><span> /></span></span><span></span><span><span> <</span><span>div</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"lg"</span><span>></span><span>Taylor Otwell</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span>></span><span>Creator of Laravel</span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span></</span><span>div</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="grouped-feature" data-aside-title="3"><a href="#grouped-feature">Grouped feature</a></h3>
<div>
<p></p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>div</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"xl"</span><span>></span><span>The Laravel Podcast </span><span><</span><span>flux:badge</span><span> inset</span><span>=</span><span>"top bottom"</span><span> class</span><span>=</span><span>"ml-1 max-sm:hidden"</span><span>></span><span>New</span><span></</span><span>flux:badge</span><span>></</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"mt-2"</span><span>></span></span><span><span> A podcast about Laravel, development best practices, and the PHP ecosystem—hosted by Jeffrey Way, Matt Stauffer, and Taylor Otwell, later joined by Adam Wathan.</span></span><span><span> </</span><span>flux:text</span><span>></span></span><span></span><span><span> <</span><span>flux:avatar.group</span><span> class</span><span>=</span><span>"mt-6"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/taylorotwell"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/adamwathan"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/jeffrey_way"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/stauffermatt"</span><span> /></span></span><span><span> </</span><span>flux:avatar.group</span><span>></span></span><span><span></</span><span>div</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="members-table" data-aside-title="3"><a href="#members-table">Members table</a></h3>
<div>
<p>Include avatars in table rows to make user data more identifiable.</p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>div</span><span> class</span><span>=</span><span>"flex justify-between items-center mb-4"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"lg"</span><span>></span><span>Team members</span><span></</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> icon</span><span>=</span><span>"plus"</span><span>></span><span>Invite</span><span></</span><span>flux:button</span><span>></span></span><span><span></</span><span>div</span><span>></span></span><span></span><span><span><</span><span>flux:table</span><span>></span></span><span><span> <</span><span>flux:table.rows</span><span>></span></span><span><span> <</span><span>flux:table.row</span><span>></span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 sm:gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> class</span><span>=</span><span>"max-sm:size-8"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/calebporzio"</span><span> /></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex flex-col"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Caleb Porzio </span><span><</span><span>flux:badge</span><span> size</span><span>=</span><span>"sm"</span><span> color</span><span>=</span><span>"blue"</span><span> class</span><span>=</span><span>"ml-1 max-sm:hidden"</span><span>></span><span>You</span><span></</span><span>flux:badge</span><span>></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"max-sm:hidden"</span><span>></span><span><a href="/cdn-cgi/l/email-protection" data-cfemail="1172707d7473517d70637067747d3c7d786774667863743f727e7c">[email protected]</a></span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex justify-end items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:select</span><span> size</span><span>=</span><span>"sm"</span><span> class</span><span>=</span><span>"min-w-fit max-w-fit"</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"admin"</span><span> selected</span><span>></span><span>Admin</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"member"</span><span>></span><span>Member</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"guest"</span><span>></span><span>Guest</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> </</span><span>flux:select</span><span>></span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> variant</span><span>=</span><span>"subtle"</span><span> icon</span><span>=</span><span>"trash"</span><span> class</span><span>=</span><span>"shrink-0"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span><span> </</span><span>flux:table.row</span><span>></span></span><span></span><span><span> <</span><span>flux:table.row</span><span> ></span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 sm:gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> class</span><span>=</span><span>"max-sm:size-8"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/hugosaintemarie"</span><span> /></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex flex-col"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Hugo Sainte-Marie</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"max-sm:hidden"</span><span>></span><span><a href="/cdn-cgi/l/email-protection" data-cfemail="b4dcc1d3dbf4d1ccd5d9c4d8d19ad7dbd9">[email protected]</a></span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex justify-end items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:select</span><span> size</span><span>=</span><span>"sm"</span><span> class</span><span>=</span><span>"min-w-fit max-w-fit"</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"admin"</span><span>></span><span>Admin</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"member"</span><span> selected</span><span>></span><span>Member</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"guest"</span><span>></span><span>Guest</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> </</span><span>flux:select</span><span>></span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> variant</span><span>=</span><span>"subtle"</span><span> icon</span><span>=</span><span>"trash"</span><span> class</span><span>=</span><span>"shrink-0"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span><span> </</span><span>flux:table.row</span><span>></span></span><span></span><span><span> <</span><span>flux:table.row</span><span>></span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 sm:gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> class</span><span>=</span><span>"max-sm:size-8"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/joshhanley"</span><span> /></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex flex-col"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Josh Hanley</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"max-sm:hidden"</span><span>></span><span><a href="/cdn-cgi/l/email-protection" data-cfemail="94fefbe7fcd4f1ecf5f9e4f8f1baf7fbf9">[email protected]</a></span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex justify-end items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:select</span><span> size</span><span>=</span><span>"sm"</span><span> class</span><span>=</span><span>"min-w-fit max-w-fit"</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"admin"</span><span>></span><span>Admin</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"member"</span><span> selected</span><span>></span><span>Member</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"guest"</span><span>></span><span>Guest</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> </</span><span>flux:select</span><span>></span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> variant</span><span>=</span><span>"subtle"</span><span> icon</span><span>=</span><span>"trash"</span><span> class</span><span>=</span><span>"shrink-0"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span><span> </</span><span>flux:table.row</span><span>></span></span><span><span> </</span><span>flux:table.rows</span><span>></span></span><span><span></</span><span>flux:table</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="assignees-list" data-aside-title="3"><a href="#assignees-list">Assignees list</a></h3>
<div>
<p>Include avatars in table rows to make user data more identifiable.</p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>flux:card</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex justify-between items-center"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Assignees</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> variant</span><span>=</span><span>"subtle"</span><span> icon</span><span>=</span><span>"plus"</span><span> inset</span><span>=</span><span>"top bottom"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span></span><span><span> <</span><span>flux:separator</span><span> class</span><span>=</span><span>"mt-2 mb-4"</span><span> variant</span><span>=</span><span>"subtle"</span><span> /></span></span><span></span><span><span> <</span><span>ul</span><span> class</span><span>=</span><span>"flex flex-col gap-3"</span><span>></span></span><span><span> <</span><span>li</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/calebporzio"</span><span> /></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Caleb Porzio</span><span></</span><span>flux:heading</span><span>></span></span><span><span> </</span><span>li</span><span>></span></span><span><span> <</span><span>li</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/hugosaintemarie"</span><span> /></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Hugo Sainte-Marie</span><span></</span><span>flux:heading</span><span>></span></span><span><span> </</span><span>li</span><span>></span></span><span><span> <</span><span>li</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/joshhanley"</span><span> /></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Josh Hanley</span><span></</span><span>flux:heading</span><span>></span></span><span><span> </</span><span>li</span><span>></span></span><span><span> <</span><span>li</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/jasonlbeggs"</span><span> /></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Jason Beggs</span><span></</span><span>flux:heading</span><span>></span></span><span><span> </</span><span>li</span><span>></span></span><span><span> </</span><span>ul</span><span>></span></span><span><span></</span><span>flux:card</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="select-options" data-aside-title="3"><a href="#select-options">Select options</a></h3>
<div>
<p>Enhance select options with avatars to make them more visually recognizable.</p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>flux:select</span><span> variant</span><span>=</span><span>"listbox"</span><span> label</span><span>=</span><span>"Assign to"</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> selected</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 whitespace-nowrap"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/calebporzio"</span><span> /></span><span> Caleb Porzio</span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:select.option</span><span>></span></span><span></span><span><span> <</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 whitespace-nowrap"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/hugosaintemarie"</span><span> /></span><span> Hugo Sainte-Marie</span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:select.option</span><span>></span></span><span></span><span><span> <</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 whitespace-nowrap"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/joshhanley"</span><span> /></span><span> Josh Hanley</span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:select.option</span><span>></span></span><span></span><span><span> <</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 whitespace-nowrap"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"xs"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/jasonlbeggs"</span><span> /></span><span> Jason Beggs</span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:select.option</span><span>></span></span><span><span></</span><span>flux:select</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="user-popover" data-aside-title="3"><a href="#user-popover">User popover</a></h3>
<div>
<p>Display a user's profile information in a popover.</p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>flux:dropdown</span><span> hover</span><span> position</span><span>=</span><span>"bottom center"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> as</span><span>=</span><span>"button"</span><span> name</span><span>=</span><span>"calebporzio"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/calebporzio"</span><span> /></span></span><span></span><span><span> <</span><span>flux:popover</span><span> class</span><span>=</span><span>"relative max-w-[15rem]"</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"absolute top-0 right-0 p-2"</span><span>></span></span><span><span> <</span><span>flux:button</span><span> icon</span><span>=</span><span>"user-plus"</span><span> variant</span><span>=</span><span>"filled"</span><span> size</span><span>=</span><span>"sm"</span><span>></span><span>Follow back</span><span></</span><span>flux:button</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"xl"</span><span> name</span><span>=</span><span>"calebporzio"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/calebporzio"</span><span> /></span></span><span></span><span><span> <</span><span>flux:heading</span><span> class</span><span>=</span><span>"mt-2"</span><span>></span><span>Caleb Porzio</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span>></span><span>@calebporzio</span><span> <</span><span>flux:badge</span><span> color</span><span>=</span><span>"zinc"</span><span> size</span><span>=</span><span>"sm"</span><span> inset</span><span>=</span><span>"top bottom"</span><span>></span><span>Follows you</span><span></</span><span>flux:badge</span><span>></</span><span>flux:text</span><span>></span></span><span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"mt-3"</span><span>></span></span><span><span> I'm a full stack developer with a passion for building web applications. Currently working on a new project called </span><span><</span><span>flux:link</span><span> href</span><span>=</span><span>"https://fluxui.dev"</span><span>></span><span>Flux</span><span></</span><span>flux:link</span><span>></span><span>.</span></span><span><span> </</span><span>flux:text</span><span>></span></span><span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex gap-4 mt-3"</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex gap-2 items-center"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>1.2k</span><span></</span><span>flux:heading</span><span>></span><span> <</span><span>flux:text</span><span>></span><span>Followers</span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex gap-2 items-center"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>1.2k</span><span></</span><span>flux:heading</span><span>></span><span> <</span><span>flux:text</span><span>></span><span>Following</span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:popover</span><span>></span></span><span><span></</span><span>flux:dropdown</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
---
## components/avatar
_Package: livewire/flux-pro | Versions: ["2.x"]_
_Source: https://fluxui.dev/components/avatar#livewire/flux-pro_
### components/avatar Examples
<h2 data-aside-title="2" data-aside-label="Examples">
Examples
</h2>
<div>
<h3 id="testimonial" data-aside-title="3"><a href="#testimonial">Testimonial</a></h3>
<div>
<p></p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>div</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> <</span><span>flux:icon.star</span><span> variant</span><span>=</span><span>"solid"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"xl"</span><span> class</span><span>=</span><span>"mt-4 italic"</span><span>></span></span><span><span> <</span><span>p</span><span>></span><span>IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥</span><span></</span><span>p</span><span>></span></span><span><span> </</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"mt-6 flex items-center gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/taylorotwell"</span><span> /></span></span><span></span><span><span> <</span><span>div</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"lg"</span><span>></span><span>Taylor Otwell</span><span></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span>></span><span>Creator of Laravel</span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span></</span><span>div</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="grouped-feature" data-aside-title="3"><a href="#grouped-feature">Grouped feature</a></h3>
<div>
<p></p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb"><code><span><span><</span><span>div</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"xl"</span><span>></span><span>The Laravel Podcast </span><span><</span><span>flux:badge</span><span> inset</span><span>=</span><span>"top bottom"</span><span> class</span><span>=</span><span>"ml-1 max-sm:hidden"</span><span>></span><span>New</span><span></</span><span>flux:badge</span><span>></</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"mt-2"</span><span>></span></span><span><span> A podcast about Laravel, development best practices, and the PHP ecosystem—hosted by Jeffrey Way, Matt Stauffer, and Taylor Otwell, later joined by Adam Wathan.</span></span><span><span> </</span><span>flux:text</span><span>></span></span><span></span><span><span> <</span><span>flux:avatar.group</span><span> class</span><span>=</span><span>"mt-6"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/taylorotwell"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/adamwathan"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/jeffrey_way"</span><span> /></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> src</span><span>=</span><span>"https://unavatar.io/x/stauffermatt"</span><span> /></span></span><span><span> </</span><span>flux:avatar.group</span><span>></span></span><span><span></</span><span>div</span><span>></span></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="members-table" data-aside-title="3"><a href="#members-table">Members table</a></h3>
<div>
<p>Include avatars in table rows to make user data more identifiable.</p>
</div>
<div>
<div>
<div></div>
<div style="scrollbar-width: thin;">
<div>
<pre style="background-color:#fffffe;--shiki-dark-bg:#1e1e1e;color:#333333;--shiki-dark:#bbbbbb">
<code><span><span><</span><span>div</span><span> class</span><span>=</span><span>"flex justify-between items-center mb-4"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span> size</span><span>=</span><span>"lg"</span><span>></span><span>Team members</span><span></</span><span>flux:heading</span><span>></span></span><span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> icon</span><span>=</span><span>"plus"</span><span>></span><span>Invite</span><span></</span><span>flux:button</span><span>></span></span><span><span></</span><span>div</span><span>></span></span><span></span><span><span><</span><span>flux:table</span><span>></span></span><span><span> <</span><span>flux:table.rows</span><span>></span></span><span><span> <</span><span>flux:table.row</span><span>></span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex items-center gap-2 sm:gap-4"</span><span>></span></span><span><span> <</span><span>flux:avatar</span><span> circle</span><span> size</span><span>=</span><span>"lg"</span><span> class</span><span>=</span><span>"max-sm:size-8"</span><span> src</span><span>=</span><span>"https://unavatar.io/github/calebporzio"</span><span> /></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex flex-col"</span><span>></span></span><span><span> <</span><span>flux:heading</span><span>></span><span>Caleb Porzio </span><span><</span><span>flux:badge</span><span> size</span><span>=</span><span>"sm"</span><span> color</span><span>=</span><span>"blue"</span><span> class</span><span>=</span><span>"ml-1 max-sm:hidden"</span><span>></span><span>You</span><span></</span><span>flux:badge</span><span>></</span><span>flux:heading</span><span>></span></span><span><span> <</span><span>flux:text</span><span> class</span><span>=</span><span>"max-sm:hidden"</span><span>></span><span><a href="/cdn-cgi/l/email-protection" data-cfemail="0360626f6661436f62716275666f2e6f6a7566746a71662d606c6e">[email protected]</a></span><span></</span><span>flux:text</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span></span><span><span> <</span><span>flux:table.cell</span><span>></span></span><span><span> <</span><span>div</span><span> class</span><span>=</span><span>"flex justify-end items-center gap-2"</span><span>></span></span><span><span> <</span><span>flux:select</span><span> size</span><span>=</span><span>"sm"</span><span> class</span><span>=</span><span>"min-w-fit max-w-fit"</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"admin"</span><span> selected</span><span>></span><span>Admin</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"member"</span><span>></span><span>Member</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> <</span><span>flux:select.option</span><span> value</span><span>=</span><span>"guest"</span><span>></span><span>Guest</span><span></</span><span>flux:select.option</span><span>></span></span><span><span> </</span><span>flux:select</span><span>></span></span><span><span> <</span><span>flux:button</span><span> size</span><span>=</span><span>"sm"</span><span> variant</span><span>=</span><span>"subtle"</span><span> icon</span><span>=</span><span>"trash"</span><span> class</span><span>=</span><span>"shrink-0"</span><span> /></span></span><span><span> </</span><span>div</span><span>></span></span><span><span> </</span><span>flux:table.cell</span><span>></span></span><span><span> </</span><span>flux:ta
_[Content truncated due to token limit]_
jesseschutt commented
@pushpak1300 - I think your response is intended for #178?
rolandorojas commented
I'm not sure if we're mixing two completely unrelated issues here
pushpak1300 commented
@jesseschutt @rolandorojas probably just had a ton of tabs open, gotta be more careful next time 😂