Interactive

Button

A clickable button that triggers a function when pressed. Buttons are the primary way users interact with your widget, whether submitting forms, navigating between views, or performing actions.

<Button label="Submit" onClickAction={{ functionName: "submit" }} variant="solid" color="primary" />

Props

Prop	Type	Default	Description
`label`	string	—	Button text.
`onClickAction`	action	—	Function to run when clicked.
`variant`	`solid` \| `soft` \| `outline` \| `ghost`	`solid`	Visual style of the button.
`color`	`primary` \| `secondary` \| `success` \| `danger` \| `warning` \| `info` \| `discovery` \| `caution`	`secondary`	Button color.
`size`	`3xs` \| `2xs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl`	`md`	Button size.
`iconStart`	icon name	—	Icon displayed before the label.
`iconEnd`	icon name	—	Icon displayed after the label.
`iconSize`	`sm` \| `md` \| `lg` \| `xl` \| `2xl`	—	Size of the start and end icons.
`submit`	boolean	`false`	Submit the parent form when clicked.
`block`	boolean	`false`	Stretch the button to full width.
`pill`	boolean	`false`	Apply fully rounded corners.
`uniform`	boolean	`false`	Equal width and height, creating a square button.
`disabled`	boolean	`false`	Disable the button, preventing interaction.

The onClickAction prop accepts an object with a functionName key that maps to one of your widget’s defined functions. You can also pass an additionalInputs object to send extra data along with the action.

Examples

Basic Action Button

A simple button that triggers a named function when clicked.

<Button
  label="Refresh"
  onClickAction={{ functionName: "refresh" }}
  variant="solid"
  color="primary"
/>

Form Submit Button

Use the submit prop to make the button submit its parent form. Pair this with a Card that has asForm set to true.

<Card asForm>
  <Col gap={3}>
    <TextInput name="email" label="Email" />
    <Button label="Subscribe" submit variant="solid" color="success" />
  </Col>
</Card>

When submit is true, clicking the button collects all input values from the parent form and passes them to the function defined in the Card’s confirm action or the button’s own onClickAction.

Icon Button

Add icons before or after the label using iconStart and iconEnd. Use the uniform prop to create a square icon-only button.

<Button
  label="Download"
  onClickAction={{ functionName: "download" }}
  iconStart="arrow-down-to-line"
  variant="outline"
  color="info"
/>

<Button
  label=""
  onClickAction={{ functionName: "settings" }}
  iconStart="gear"
  uniform
  variant="ghost"
/>

Full-Width Button

Set block to true to make the button span the entire width of its container.

<Button
  label="Continue to Checkout"
  onClickAction={{ functionName: "checkout" }}
  variant="solid"
  color="primary"
  block
/>

Button with Additional Inputs

Pass extra data alongside the action using additionalInputs. This is especially useful when rendering buttons in a loop, where each button needs to reference a specific item.

{items.map((item) => (
  <Button
    label={item.name}
    onClickAction={{
      functionName: "selectItem",
      additionalInputs: { itemId: item.id }
    }}
    variant="outline"
  />
))}

The additionalInputs object is merged with any form data when the action is triggered. Use it to attach contextual identifiers like IDs, indexes, or metadata to button clicks.

Getting Started

JavaScript Embed Features

API v1 Reference

Advanced Integration

Widgets

Button

Props

Examples

Basic Action Button

Form Submit Button

Icon Button

Full-Width Button

Button with Additional Inputs

​Button

​Props

​Examples

​Basic Action Button

​Form Submit Button

​Icon Button

​Full-Width Button

​Button with Additional Inputs

Button

Props

Examples

Basic Action Button

Form Submit Button

Icon Button

Full-Width Button

Button with Additional Inputs