Form
Button
Interactive button component with multiple variants, sizes, and states for triggering actions.
Overview
The Button component provides themed call-to-action controls in primary, secondary, and other variants. It supports three sizes (small, medium, large), loading state with spinner, and optional leading or trailing icons for forms, navigation, and CTAs.
Key Business & UX Benefits
- Clear primary and secondary variants guide users to the main action.
- Loading state prevents double-submit and gives feedback during async actions.
- Themed sizes and icons fit forms, headers, and cards consistently.
- Accessible focus and keyboard support for all interactive states.
Pro-Tip from Larry: Use the loading state on submit buttons so users know the action is in progress.
Usage
Primary Button
Primary Button
<LButton />
Primary Secondary
Primary Secondary
<LButton />
Button Sizes
Button Primary Small
<LButton />
Button Primary Medium
<LButton />
Button Primary Medium
<LButton />
Button Variants
TODO
Button with Icons
A button can have icons of different kind on both sides.
Button with both icons
<LButton />
Button with Loading Animation
Submitting a Button can force a loading state. An Icon Button can have a loader as well.
Button with loading Animation
<LButton />
Icon Button with loading Animation
<LButton />
Feature List
- Pre-selected button styles for color variants
- Customizable button variant
- Linkable call-to-action button
- Loading state and optional leading or trailing icons
API Reference
| Prop | Default | Type |
|---|---|---|
disabled | false | boolean |
size | medium | ButtonSize ("small" | "medium" | "large") |
variant | primary | ButtonVariant ("primary" | "secondary" | 13 more) |
href | string | |
target | string | |
type | text | "icon" | "text" | "close-button" |
isLoading | false | boolean |
buttonType | button | "submit" | "button" |
| Slot | Type |
|---|---|
default | any |
iconLeft | any |
iconRight | any |
| Event | Type |
|---|---|
click | (event: "click", e: MouseEvent): void |