Skip to main content

​
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

PropTypeDefaultDescription
labelstring—Button text.
onClickActionaction—Function to run when clicked.
variantsolid | soft | outline | ghostsolidVisual style of the button.
colorprimary | secondary | success | danger | warning | info | discovery | cautionsecondaryButton color.
size3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xlmdButton size.
iconStarticon name—Icon displayed before the label.
iconEndicon name—Icon displayed after the label.
iconSizesm | md | lg | xl | 2xl—Size of the start and end icons.
submitbooleanfalseSubmit the parent form when clicked.
blockbooleanfalseStretch the button to full width.
pillbooleanfalseApply fully rounded corners.
uniformbooleanfalseEqual width and height, creating a square button.
disabledbooleanfalseDisable 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.