Components

Button

A powerful and composable button component for your application.

Copy to clipboard

Variants

Use the variant prop to change the visual style of the button.

Use primary buttons sparingly; mostly for form submissions.
Copy to clipboard

Sizes

The default button size works great for most cases, but here are some additional size options for unique situations.

Copy to clipboard

Icons

Automatically sized and styled icons for your buttons.

Copy to clipboard

Loading

Buttons with wire:click or type="submit" will automatically show a loading indicator and disable pointer events during network requests.

Copy to clipboard

You can disable this behavior using :loading="false".

Copy to clipboard

Full width

A button that spans the full width of the container.

Copy to clipboard

Button groups

Fuse related buttons into a group with shared borders.

Copy to clipboard

Icon group

Fuse multiple icon buttons into a visually-linked group.

Copy to clipboard

Attached button

Append or prepend an icon button to another button to add additional functionality.

Copy to clipboard

Display an HTML a tag as a button by passing the href prop.

Copy to clipboard

As an input

To display a button as an input, pass as="button" to the input component.

Copy to clipboard

Square

Make the height and width of a button equal. Flux does this automatically for icon-only buttons.

Copy to clipboard

Inset

When using ghost or subtle button variants, you can use the inset prop to negate any invisible padding for better alignment.

Post successfully created.
Copy to clipboard

Reference

flux:button

Prop
Description
as
The HTML tag to render the button as. Options: button (default), a, div.
href
The URL to link to when the button is used as an anchor tag.
type
The HTML type attribute of the button. Options: button (default), submit.
variant
Visual style of the button. Options: outline, primary, filled, danger, ghost, subtle. Default: outline.
size
Size of the button. Options: base (default), sm, xs.
icon
Name of the icon to display at the start of the button.
icon:variant
Visual style of the icon. Options: outline (default), solid, mini, micro.
icon:trailing
Name of the icon to display at the end of the button.
square
If true, makes the button square. (Useful for icon-only buttons.)
inset
Add negative margins to specific sides. Options: top, bottom, left, right, or any combination of the four.
loading
If true, shows a loading spinner and disables the button when used with wire:click or type="submit". If false, the button will not show a loading spinner at all. Default: true.
tooltip
Text to display in a tooltip when hovering over the button.
tooltip:position
Position of the tooltip. Options: top, bottom, left, right. Default: top.
tooltip:kbd
Text to display in a keyboard shortcut tooltip when hovering over the button.
kbd
Text to display in a keyboard shortcut tooltip when hovering over the button.
CSS
Description
class
Additional CSS classes applied to the button. Common use: w-full for full width.
Attribute
Description
data-flux-button
Applied to the root element for styling and identification.

flux:button.group

A container component that groups multiple buttons together with shared borders.

Slot
Description
default
The buttons to be grouped together.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie