/

Documentation

/

Buttons

Buttons

The button component is crafted for usability, clarity, and consistency. It includes multiple variants for primary actions, secondary interactions, and subtle UI tasks — all responsive and accessible by design.

Button

Component

With consistent padding, typography, and state styles, the default button adapts seamlessly to your layout while maintaining visual hierarchy and interactive feedback across devices.

Variants

The default button ships with 6 different variants.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Start Icon

The default button can enable a left side (start) icon. The icon can also be changed by inserting any svg inline code.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

End Icon

The default button can enable a right side (end) icon. The icon can also be changed by inserting any svg inline code.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Button Animated

Component

Similar to the default button, the animated button provides an animation with its hover state, showing an icon that can easily be configured.

Variants

The animated button ships with 6 different variants, like the default button.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Custom Icon

The animated button icon can be swapped with another.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Button Submit

Component

The submit button is used to validate and submit forms. It is provided by Framer and can be customized. The submit button has been customized to be consistent with the other buttons.

Variants

The submit button ships with 4 different variants, including default, loading, success and disabled state.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Button Search

Component

The search button triggers the built-in Framer site search functionality.

Variants

The submit button ships with 2 different variants

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Search…

K

Summary

The Buttons collection includes versatile styles designed for clarity, usability, and consistency. Featuring primary, secondary, and subtle variants, each button adapts seamlessly to different contexts with responsive feedback and accessible interaction—ensuring a polished, user-friendly experience across your site.

Create a free website with Framer, the website builder loved by startups, designers and agencies.