For the best experience, please view this on a larger device.

Button

The SubmitButton component is a streamlined design component for Framer, specifically tailored for use with Framer and Blak/UI forms. It simplifies the process of designing and implementing submit buttons.

Features

Design

Variants

Dark Mode

Variants

Properties Overview

label (String): The text to be displayed on the submit button.
buttonStyle (Object): Custom styling for the button to align with your design needs.
loading (Boolean): Indicates whether the button should display a loading state.
disabled (Boolean): Disables the button, preventing any user interaction.
onClick (Function): Callback function that triggers when the button is clicked.

Implementation Example

Basic Setup

To integrate the SubmitButton component into your Framer project, use it within your form and configure the properties as needed.

Notes

Label Property: Use the label property to set the text that appears on the submit button.
Button Style: Customize the appearance of the button using the buttonStyle property to match your design system.
Loading State: The loading property can be toggled to show a loading spinner or effect, indicating that the form is being submitted.
Disabled State: Use the disabled property to disable the button, preventing any click events when the form is not ready for submission.

This component simplifies the process of adding and styling submit buttons in Framer, providing a cohesive and efficient way to handle form submissions in your designs.