Button
A button that sends its onClick event. With href it opens the URL, and with copy it copies the text, both without the agent. Use variant "primary" for the one main Button in a Row, and the default for the others. With submit true inside a Form, it submits the Form. The child or children render instead of the label. With checks, it is disabled while a check fails.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
label | string | The button text |
checks | object[] | Validation rules. The control shows the first failed one |
text | string | Same as label. Used when label is not set |
variant | "default" | "primary" | "soft" | "borderless" | Default "default": outlined. "primary" is filled, for the one main action. "borderless" has no box, like a link |
color | "primary" | "secondary" | "danger" | Default "primary" |
size | "sm" | "md" | "lg" | Default "lg" |
block | boolean | Full width |
weight | number | flex-grow in a Row or Column |
pill | boolean | Default true |
disabled | boolean | |
loading | boolean | |
submit | boolean | Submits the Form around it. The Form sends its onSubmit event |
icon | string | Lucide icon name |
uniform | boolean | A square button, for an icon |
href | string | Opens this URL in a new tab on click, instead of onClick |
copy | string | Copies this text to the clipboard on click and shows a check mark, instead of onClick |
Slots
child· singlechildren· multiple
Events
onClick· Sent when the user clicks the button.