The Changelog
What's new around here?
Succinct and informative updates about Flux.
June 16, 2025
Pills & button selectors
Version ^2.2.0
We've added two new variants to the radio and checkbox components: pills and buttons.
These variants work with both radio groups and checkbox groups, giving you compact alternatives that fit perfectly in filters, toolbars, and anywhere you want a more streamlined look.
Pills
Pills are compact, rounded buttons that look like…well…pills! They're perfect for laying out selectable options in a way that doesn't dominate the UI.
Copy to clipboard
<flux:checkbox.group variant="pills" label="Categories"> <flux:checkbox value="fantasy" label="Fantasy" /> <flux:checkbox value="science-fiction" label="Science fiction" /> <flux:checkbox value="horror" label="Horror" /> <!-- ... --></flux:checkbox.group>Of course, pills work just as well with the radio.group component if you only want them to be single-select.
Selectable buttons
The buttons variant gives you toolbar-style options that look more prominent and actionable. Perfect for feature toggles and grouped controls:
Copy to clipboard
<flux:radio.group variant="buttons" label="Feedback type"> <flux:radio icon="bug-ant">Bug report</flux:radio> <flux:radio icon="light-bulb">Suggestion</flux:radio> <flux:radio icon="question-mark-circle">Question</flux:radio></flux:radio.group>Like all Flux components, these variants are fully keyboard accessible with proper focus management and screen reader support. The pills flow nicely and wrap to new lines when needed, while the buttons maintain consistent sizing and alignment.
Both variants support all the same props as the standard radio and checkbox components—icons, disabled states, and more.
March 25, 2025
Avatars
Version ^2.1.0
We've added a new Avatar component to Flux UI. It's a small, but important, piece of UI that we held off on until we could give it the attention it deserves. Let's take a look.
Adding an avatar to your app is straightforward:
Copy to clipboard
<flux:avatar src="https://unavatar.io/x/calebporzio" />Fallbacks
Not everyone has a profile picture, so we wanted to make sure the alternatives still look good.
When no image is provided, the avatar component will use the name to generate initials:
Copy to clipboard
<!-- Generates "CP" from the name --><flux:avatar name="Caleb Porzio" /><!-- Or control exactly what shows --><flux:avatar initials="Ca" /><!-- Even show just a single initial --><flux:avatar name="Caleb Porzio" initials:single />Colors
We added some sensible color options, including an auto-color feature that gives users a consistent identity.
Copy to clipboard
<!-- Choose from 17 preset colors --><flux:avatar name="Caleb Porzio" color="indigo" /><!-- Or let Flux deterministically generate a color --><flux:avatar name="Caleb Porzio" color="auto" /><!-- Provide a seed for consistent colors --><flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />The color="auto" option creates a color based on the name, so the same user gets the same color consistently. A small detail that helps with visual recognition.
Badges
Add status indicators or notifications:
Copy to clipboard
<!-- Simple notification dot --><flux:avatar badge badge:color="green" src="https://unavatar.io/x/calebporzio" /><!-- Notification count --><flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" /><!-- Custom badge content --><flux:avatar src="https://unavatar.io/x/calebporzio"> <x-slot:badge> <img class="size-3" src="https://unavatar.io/github/hugosaintemarie" /> </x-slot:badge></flux:avatar>Groups
Group avatars together to save on horizontal space when needed:
Copy to clipboard
<flux:avatar.group> <flux:avatar src="https://unavatar.io/x/calebporzio" /> <flux:avatar src="https://unavatar.io/x/taylorotwell" /> <flux:avatar src="https://unavatar.io/x/jeffrey_way" /> <flux:avatar>3+</flux:avatar></flux:avatar.group>Or use them in tables, dropdowns, and other UI elements:
Check out the Avatar documentation for more examples and detailed API reference.
March 10, 2025
Callouts
Version ^2.0.5
We just added Callouts to Flux! These components help draw attention to important information in your app and guide users on what to do next. Great for announcements, alerts, and feature highlights.
Colors & variants
Callouts ship with common variants for visually signaling different levels of urgency like success, warning, and danger. However, we also support any Tailwind color you'd like to use instead.
Actions
Callouts support action buttons to make it easy for users to take the next step right away. For tighter spaces, our "inline" mode puts actions right next to your message.
This works really well for things like upgrade prompts, account notifications, or introducing new features.
Flexible layout
Sometimes you may want to render your callout icon inside the heading to save space. Controlling this is as simple as adding the icon prop to the heading component instead of the root callout.
Dismissible
Flux callouts offer a dedicated controls slot for adding compact action buttons. This makes it easy to do things like add dropdown menu shortcuts or dismiss icon buttons and control their behavior however you want.
Callouts are available now as of Flux v2.0.5. Like all Flux components, they're fully responsive and dark mode ready right out of the box. We hope you find them useful—we know we will!