Button

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

Adding a Button

To add a Button to your page:

Insert the Button from the Library.

Select the Button text to something meaningful for your design.

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 and 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 and 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 Properties Panel > Background and choose a color that fits your design.

Adjust the button 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 Properties Panel > Background and 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 and adjust the following:

Under Border, adjust the border width as needed.

Under Background, set the color to transparent.

Under Typography, adjust the text 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 Properties Panel > Spacing & Size, and adjust the padding values to make the button bigger or smaller.

Select the button text and adjust its font size for better 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 border-radius:

Select the Button component.

Navigate to the Properties Panel > Borders and adjust the radius value 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.

Add your desired icon from the Library.

Position the icon before or after the button text.

Adjust the spacing between the icon and text using the gap value in the Properties Panel.

In some cases, you might 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.