Fluxo UIFluxo UIv0.1.1

Button

A versatile button component with multiple variants, sizes, and states.

Basic Usage

Default Button

Basic Example
import { Button } from 'fluxo-ui';

<Button onClick={() => console.log('Clicked!')}>Click me</Button>

Variants

All Button Variants

<Button variant="default">Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="info">Info</Button>

Sizes

All Button Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

Layouts

All Button Layouts

<Button layout="default" variant="primary">Default</Button>
<Button layout="outlined" variant="primary">Outlined</Button>
<Button layout="sharp" variant="primary">Sharp</Button>
<Button layout="rounded" variant="primary">Rounded</Button>
<Button layout="plain" variant="primary">Plain</Button>

States

Button States

<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button isLoading={loading} onClick={handleAsyncAction}>
  {loading ? 'Loading...' : 'Async Action'}
</Button>

Full Width

Full Width Button

<Button className="w-full">Full Width Button</Button>

With Icons

Buttons with Icons

<Button leftIcon={<PlusIcon />}>Left Icon</Button>
<Button rightIcon={<ArrowRightIcon />}>Right Icon</Button>
<Button leftIcon={<DownloadIcon />} variant="success">Download</Button>

Async Action Handling

Automatic Loading State for Async Actions

<Button onClick={async () => {
  await fetch('/api/data');
}}>
  Save Data
</Button>

Countdown Timer

Button with Countdown (waitFor)

<Button waitFor={5} variant="warning">
  Confirm Action
</Button>

Combination Examples

Variants with Different Layouts

Default Layout:
Outlined Layout:
Sharp Layout:
Rounded Layout:
Plain Layout:
<Button layout="outlined" variant="success">Outlined Success</Button>
<Button layout="sharp" variant="primary">Sharp Primary</Button>
<Button layout="rounded" variant="danger">Rounded Danger</Button>
<Button layout="plain" variant="primary">Plain Primary</Button>

Import

import { Button } from 'fluxo-ui';

Props

variant
'success' | 'warning' | 'danger' | 'info' | 'default' | 'primary' | 'secondary'"'default'"

Button color variant

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Button size

layout
'rounded' | 'default' | 'outlined' | 'plain' | 'sharp'"'default'"

Button layout style (default: filled with rounded corners, outlined: border with rounded corners, sharp: filled with no radius, plain: no background or border, rounded: fully rounded/pill shape)

disabled
boolean"false"

Disable button interaction

isLoading
boolean"false"

Show loading spinner and disable interaction

leftIcon
IconComponent | ReactElement

Icon to display on the left side of the button

rightIcon
IconComponent | ReactElement

Icon to display on the right side of the button

label
string

Button label text (alternative to children)

children
ReactNode

Button content

onClick
(e: MouseEvent) => void | Promise<any>

Click event handler (supports async functions for automatic loading state)

className
string

Additional CSS classes

loadingMessage
string"'Loading...'"

Message to display while loading

waitFor
number

Countdown timer in seconds before button becomes clickable

href
string

URL to navigate to (renders as link)

newTab
boolean"false"

Open link in new tab

type
'submit' | 'link' | 'button'"'button'"

Button type

ariaLabel
string

Accessibility label

title
string

HTML title attribute

id
string

HTML id attribute

Features

Variants

7 color variants: default, primary, secondary, success, warning, danger, info

Layouts

5 shape styles: default, outlined, sharp, rounded (pill), and plain

Sizes

5 size options: xs, sm, md, lg, xl for every context

Async Support

Automatically shows loading state when onClick returns a Promise

Countdown Timer

waitFor prop disables the button with a countdown for destructive actions

Icon Support

Left and right icon slots accept any React element or icon component

Link Mode

Renders as an anchor tag when href is provided, with optional newTab

Accessibility

ARIA labels, keyboard focus, role and state attributes built in

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config