Hyve Button Kit
Save 4+ hours on every Framer project. Professional buttons that just work.
Hyve Button Kit
Save 4+ hours on every Framer project. Professional buttons that just work.
Hyve Button Kit
Save 4+ hours on every Framer project. Professional buttons that just work.
Hyve Button Kit
Save 4+ hours on every Framer project. Professional buttons that just work.
Stop rebuilding button variants manually
Hyve buttons work different: Change one theme value, update 100+ buttons. Add an icon? Dropdown. Resize for mobile? Toggle sizes in the props panel. This kit is built for designers who are focused on quality and managing their bottom line.
The power of a design system. Ready to ship.
7 professional button variants
Bonus glow-up gradient button
Easy, professional animations
Theme customization system
Icon support (library + custom)
Loading state with animation
Instance-level
custom SVG icon support
Choose from a library of 20 useful icons or paste in your own SVG paths for leading or trailing positions. The trailing icon can also have a sophisticated, easy-to-add easing animation for a professional polish.
Global Theme Control
Do your pro thing to make this button set feel right at home in your design.
Save the theme component at the top of every page (the nav is a great place).
Customize your colors, fonts, and styling.
Voilà! Everything just works.
Theme Panel Settings:
Theme Panel Settings:
Theme Panel Settings:
Theme Panel Settings:
Colors
4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.
Colors
4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.
Colors
4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.
Colors
4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.
Gradient Button
Color start and end, gradient angle.
Gradient Button
Color start and end, gradient angle.
Gradient Button
Color start and end, gradient angle.
Gradient Button
Color start and end, gradient angle.
Corner Radius
Set from 0 to 9999 or anywhere in between.
Corner Radius
Set from 0 to 9999 or anywhere in between.
Corner Radius
Set from 0 to 9999 or anywhere in between.
Corner Radius
Set from 0 to 9999 or anywhere in between.
Stroke weight
Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.
Stroke weight
Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.
Stroke weight
Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.
Stroke weight
Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.
Shadow
Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.
Shadow
Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.
Shadow
Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.
Shadow
Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.
Hover Y
Set a vertical travel distance in pixels for your hover state in desktop.
Hover Y
Set a vertical travel distance in pixels for your hover state in desktop.
Hover Y
Set a vertical travel distance in pixels for your hover state in desktop.
Hover Y
Set a vertical travel distance in pixels for your hover state in desktop.
Tap Scale
Set the scale effect to happen on press.
Tap Scale
Set the scale effect to happen on press.
Tap Scale
Set the scale effect to happen on press.
Tap Scale
Set the scale effect to happen on press.
Trailing Icon Shift
From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.
Trailing Icon Shift
From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.
Trailing Icon Shift
From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.
Trailing Icon Shift
From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.
Font Family
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Family
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Family
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Family
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Weight
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Weight
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Weight
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Font Weight
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Letter Spacing
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Letter Spacing
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Letter Spacing
Track your lettering for style or legibility.
Letter Spacing
Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!
Text Transform
A global setting to globally apply upper case.
Text Transform
A global setting to globally apply upper case.
Text Transform
A global setting to globally apply upper case.
Text Transform
A global setting to globally apply upper case.
Also! Before we go…yes! There are other important states available within the component, configurable within the instance panel.
Also! Before we go…yes! There are other important states available within the component, configurable within the instance panel.
Hyve Digital Buttons help prevent project sprawl
After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.
After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.
After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.
After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.