Button

The Button component is used to trigger actions, submit forms, or navigate users.

Usage

Adding a Button

To add a Button to your page:

Open the Insert Menu and navigate to Components.

Drag the Button component onto your page.

Guides

Disabled

A disabled button prevents users from clicking or interacting with it. This is useful when an action isn’t available yet, like a "Submit" button in an incomplete form.

To disable a button:

In the Properties Panel, toggle the Disabled option.

You can also disable a button dynamically with conditional logic.

As Link

Sometimes, you might want a button to act as a link while keeping the button’s styling.

To turn a button into a link:

Select the button component.

Set the button’s href property to the desired URL.

Choose whether it opens in a new tab or the same window.

Submit button (Form)

A button inside a form can act as a submit button. This sends the form data when clicked.

To make a Submit button:

Place the Button component inside a Form component.

Select the Button.

In the Properties Panel, set Type to "Submit" and Behavior to “Button”.

Variants

By default, buttons have a solid background. However, you can change the style to match different design needs.

Text Button

A text button is used when you want a minimal button with no background or border, just text. This type of button works well for secondary actions like “Cancel” or “See more.”

To create a text button:

Select the Button component.

Open the Style Panel.

Remove the Background Color and Border.

Set the Text Color as needed.

Outline Button (Border Only)

An outlined button is useful when you want a button that stands out but isn’t too bold. They are also great for secondary or alternative actions. To create an outline button, follow these steps:

Select the Button component.

Open the Style Panel.

Set a Border and adjust its thickness.

Remove the Background Color to keep it transparent.

Adjust the Text Color to match the border.

Sizes

Depending on the design, you may want to make buttons smaller or larger. To adjust your button’s size:

Select the Button component.

Open the Properties Panel.

Adjust the Padding values to make the button bigger or smaller.

Smaller buttons are often used for compact UI elements, while larger buttons work well for main actions.

Radius

To adjust the button’s corner radius:

Select the Button component.

Navigate to the Style Panel.

Locate the Border Radius setting and adjust it

Icon

You can add an icon inside a button by nesting an icon component inside it:

Drag an Icon component inside the Button.

Position it before or after the button text.

Adjust spacing using the gap property.

For an icon-only button:

Remove the text.

Adjust padding and size to keep it centered.

Color

Changing the button’s color allows you to match it with your design theme. To change the button’s color:

Select the Button component.

Open the Style Panel.

Adjust the Background Color.

Modify the Text Color for contrast.

(Optional) Adjust the Border Color for outlined buttons.

Group

When you need multiple buttons together, such as for pagination or toggle options, you can group them. To create a Button Group:

Add a Row component to your page.

Place multiple Button components inside it.

Adjust the Gap value.

Properties

Property	Type	Default	Description
behavior*	`'Button' \| 'Link'`	`'Link'`	Determines the behavior of the component. • `Button` renders a `<button>` element. • `Link` renders a `ClutchLink` component.
href	`string`	-	The URL the button links to. Required when `behavior` is `Link`.
onClick	`Action`	-	Triggers when the button is clicked.
type	`'button' \| 'submit' \| 'reset'`	-	The type of the button when the behavior is `Button`.
disabled	`boolean`	-	This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
autoFocus	`boolean`	-	This property specifies that the button should have input focus when the page loads. Only one element in a document can have this attribute.