Usage
import { Button } from "lambda-ui-components";
export default function App() {
return (
<Button variant="solid" color="primary">
Click me
</Button>
);
}Button
Button component triggers an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Playground
Experiment with all the properties of the Button component in real time.
Properties
label
The text content of the button.
loadingText
Text to display while the button is in a loading state.
icon
Adds an icon to the button.
color
Controls the color scheme of the button.
variant
Defines the visual style of the button.
iconPosition
Position of the icon relative to the label.
size
Controls the size of the button.
radius
Defines the border radius of the button.
block
If true, the button will take up the full width of its container.
disabled
Disables user interaction with the button.
loading
Shows a loading spinner.
isCircle
Makes the button circular (useful for icons).
API Reference
Props
Prop | Default | Type |
|---|---|---|
variant | "solid" | "classic" | "solid" | "outline" | "dashed" | "soft" | "subtle" | "text" | "unstyled" |
color | "primary" | "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "small" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
block | false | boolean |
isCircle | false | boolean |
iconPosition | "left" | "left" | "right" |
loading | false | boolean |
icon | undefined | ReactNode |
label | undefined | string |
loadingText | undefined | string |
disabled | false | boolean |