The Button component provides a flexible, accessible button that supports different visual styles, icon positioning, and custom content.
Basic usage
import { FlxButton } from '@flowx/react-ui-toolkit';
function BasicButton() {
return (
<FlxButton onClick={() => console.log('Clicked!')}>
Click me
</FlxButton>
);
}
Variants
The Button component supports three visual variants:
<FlxButton variant="fill">
Filled Button
</FlxButton>
<FlxButton variant="ghost">
Ghost Button
</FlxButton>
<FlxButton variant="text">
Text Button
</FlxButton>
With icons
Add icons to your buttons in different positions:
import { FlxButton, FlxIcon } from '@flowx/react-ui-toolkit';
function IconButtons() {
return (
<>
{/* Icon on the left */}
<FlxButton
variant="fill"
icon="left"
iconComponent={<FlxIcon name="plus" />}
>
Add Item
</FlxButton>
{/* Icon on the right */}
<FlxButton
variant="ghost"
icon="right"
iconComponent={<FlxIcon name="arrowRight" />}
>
Next
</FlxButton>
{/* Icon only (center) */}
<FlxButton
variant="text"
icon="center"
iconComponent={<FlxIcon name="settings" />}
aria-label="Settings"
/>
</>
);
}
When using icon-only buttons (icon="center"), always provide an aria-label for accessibility.
import { useState } from 'react';
import { FlxButton } from '@flowx/react-ui-toolkit';
function ButtonStates() {
const [loading, setLoading] = useState(false);
const handleClick = async () => {
setLoading(true);
await new Promise(resolve => setTimeout(resolve, 2000));
setLoading(false);
};
return (
<>
{/* Disabled button */}
<FlxButton disabled>
Disabled
</FlxButton>
{/* Loading state */}
<FlxButton
disabled={loading}
onClick={handleClick}
>
{loading ? 'Loading...' : 'Submit'}
</FlxButton>
</>
);
}
import { FlxButton } from '@flowx/react-ui-toolkit';
function FormWithButtons() {
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter text" />
<FlxButton type="submit" variant="fill">
Submit
</FlxButton>
<FlxButton type="reset" variant="ghost">
Reset
</FlxButton>
<FlxButton type="button" variant="text">
Cancel
</FlxButton>
</form>
);
}
As child (polymorphic)
Render the button as a different element using the asChild prop:
import { FlxButton } from '@flowx/react-ui-toolkit';
import { Link } from 'react-router-dom';
function LinkButton() {
return (
<FlxButton asChild variant="fill">
<Link to="/dashboard">
Go to Dashboard
</Link>
</FlxButton>
);
}
The asChild prop allows you to style links, custom components, or other elements with button styling while maintaining their semantic meaning.
Custom styling
Apply custom classes and styles:
<FlxButton
variant="fill"
className="custom-button-class"
style={{ borderRadius: '20px' }}
>
Custom Styled Button
</FlxButton>
Props
variant
'fill' | 'ghost' | 'text'
default:"fill"
The visual style variant of the button.
icon
'left' | 'right' | 'center' | ''
default:"''"
Position of the icon within the button. Use 'center' for icon-only buttons.
The icon component to render. Typically a FlxIcon component.
When true, the button renders as its child element while applying button styles.
Disables the button, preventing interaction.
type
'button' | 'submit' | 'reset'
default:"button"
The button type attribute, important for form handling.
onClick
(event: React.MouseEvent) => void
Callback fired when the button is clicked.
Additional CSS classes to apply to the button.
The content to display inside the button.
TypeScript
The Button component is fully typed:
import type { FlxButtonProps, ButtonVariant } from '@flowx/react-ui-toolkit';
const buttonConfig: FlxButtonProps = {
variant: 'fill',
icon: 'left',
onClick: () => console.log('Clicked'),
};
// Available variant types
const variants: ButtonVariant[] = ['fill', 'ghost', 'text'];
Accessibility
- Full keyboard support (Enter and Space keys)
- Proper focus indicators
- Disabled state communicated to screen readers
- Support for
aria-label and other ARIA attributes
Avoid using onClick events on disabled buttons. Instead, remove the disabled state or provide feedback explaining why the button is disabled.