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.
Colors
4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.
Gradient Button
Color start and end, gradient angle.
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.
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.
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.
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!
Text Transform
A global setting to globally apply upper case.