# Colored buttons

Published: September 7, 2026

<img width="640" height="180" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/colored-buttons-tiles.png" alt="Colored Flux buttons in a tilted grid with softly faded edges" />

Flux's `filled`, `outline`, `ghost`, and `subtle` buttons now support color, alongside `primary`. You can give an action a color without making it the loudest thing on the page.

Just add `color` with a standard Tailwind color name:

```blade
<flux:button color="blue">Edit profile</flux:button>
```

That's the default outline button. Swap the variant to change the emphasis:

```blade
<flux:button variant="filled" color="green">Approve</flux:button>
<flux:button variant="ghost" color="red">Remove</flux:button>
<flux:button variant="subtle" color="blue">View details</flux:button>
```

I'm particularly happy with the outlines. They keep the familiar surface and shadow, with color softly mixed into the label, border, and hover state. They still feel at home next to a regular Flux button.

<img width="640" height="180" loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/colored-buttons-outline.png" alt="Default, blue outline, and hovered red outline buttons" />

Ghost keeps a colored label on a transparent background. Subtle starts muted and brings out the color on hover. Small differences, but useful when you're deciding how much attention an action needs.

Neutral colors keep the default styling outside of `primary`.

[Check out the button docs →](https://fluxui.dev/components/button#colors)