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 totrue
.
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 thetype
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. |