Primary Button
A fully modern and customizable primary button designed for high-end UI. It features semantic intents (primary, success, warning, danger, info, secondary) and multiple visual styles (modern, clean, minimal). Built with Framer Motion for organic interactions, it supports disabled states and full color customization.
npx futureuikit add primaryBuilt with React and Framer Motion for smooth, organic interactions.Supports semantic intents: Primary, Success, Warning, Danger, Info, and Secondary.Supports multiple visual modes: Modern (Glass), Clean (Solid), and Minimal (Outline).Built-in support for disabled states with appropriate styling and interaction prevention.Fully customizable color profile via props (overrides semantic defaults).Zero-shadow design for a clean, professional aesthetic.Highly reusable and easy to integrate into any Next.js project.
- Add the button HTML markup to your page or component.
- Apply the primary button CSS class to style it.
- Place the button where a main action is required, such as forms or CTAs.
- Update the button text to match your action, like Submit or Save.
- Customize colors or size in CSS if needed to fit your design.