Button

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

Adding a Button

To add a Button to your page:

Open the Insert Menu and navigate to Components.

Click or drag the Button component onto your page.

Guides

Link vs Button

By default, a Button in Clutch functions as a Link, meaning clicking it will navigate to a specified URL. However, you can configure it to behave as a standard button for performing actions like submitting a form or triggering an event.

To switch between the Link and Button behaviors:

Select the Button component.

Go to the Properties Panel.

Locate the behavior property and choose:

'Link' (default) to navigate to a page or external URL.

'Button' to trigger an action.

If set to Link, enter the destination URL in the href field.

💡

Pro tip If you need a plain link without button styling, use the Link component instead. You can find it in the Quick Add Strip or the Insert Menu.

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:

Select the button component.

Navigate to the Properties Panel.

Set the behavior property to ‘Button’.

Add the disabled property and set it to true.

Submit button

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

To create a Submit button:

Place a Button inside a Form component.

Select the Button component.

In the Properties Panel, set the behavior property to 'Button' and the type to 'submit'.

Color

Changing the button’s color allows you to match it with your design. To change the button’s color, follow these steps:

Select the Button component.

Navigate to the Properties Panel.

Under Background, choose a Color that fits your design.

Select the button text.

Go to the Typography section and adjust the text’s color if needed to ensure it’s readable against the new background.

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 low-priority actions like “See more.”

To create a text button:

Select the Button component.

Go to the Properties Panel.

Under the Background section, set the Color to transparent.

Select the button text and modify its Color and Font Weight for visibility.

Outlined Button

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.

Navigate to the Properties Panel.

Set a Border and adjust its thickness.

Under Background, set the Color to transparent.

Under Typography, adjust the Color to match your design.

Sizes

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

Select the Button component.

Navigate to the Properties Panel.

Under Spacing & Size, adjust the Padding values to make the button bigger or smaller.

Select the button text and adjust its Font Size for better a proportion relative to the button size.

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 Properties Panel.

Locate the Radius setting under Borders and adjust it as needed.

Icon

Icons can make buttons more intuitive by visually representing their actions. For example, a trash icon for “Delete” or a plus icon for “Add” helps users quickly understand what the button does.

To add an icon inside a button, follow these steps:

Select the Button component.

Open the Insert Menu and select your icon component.

Position the icon before or after the button text.

Adjust the spacing between the icon and text using the Gap property in the Properties Panel.

In some cases, you might also want to create a button with only an icon. After adding your icon to your button:

Remove the text from the Button.

Adjust the Button size if needed.

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 from the Quick Add Panel.

Place multiple Button components inside the row.

Adjust the Gap value in the Properties Panel to set the spacing between buttons.

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.