2024-09-09 web, development, javascript
Shadcn ui buttonVariants
By O. Wolfson
When building web applications with modern JavaScript frameworks like Next.js, Shadcn UI offers a unique way to apply consistent styles across different elements, including transforming non-button elements into button-like components. This article covers how to use the buttonVariants
utility from Shadcn UI to style an element as a button in a Next.js project.
Step-by-Step Guide
-
Import the Necessary Components
First, ensure that you have Shadcn UI configured in your project. Import the
buttonVariants
function from the designated UI components directory where it's defined. For Next.js projects, you typically have imports at the top of your component files.javascriptimport { buttonVariants } from "@/components/ui/button";
-
Example: Apply the
buttonVariants
to a LinkThe
Link
component from Next.js is commonly used for client-side transitions between routes. You can style this component using Shadcn UI’sbuttonVariants
function by applying the function within theclassName
attribute of theLink
.javascriptimport Link from "next/link"; <Link className={buttonVariants({ variant: "outline", size: "lg" })} href="/" > Cancel </Link>;
In this example, the
buttonVariants
function is called with parameters to apply the "outline" style and a large size to the link, making it visually consistent with other button elements styled similarly across your application. -
Customize the Styles
The
buttonVariants
function is designed to be flexible and can accept various parameters to control the appearance of the button styles applied. You can modify the parameters likevariant
,size
, based on the available definitions in your Shadcn UI configuration to meet the design requirements of your project.The
variant
andsize
parameters are defined as follows in the Shadcn UI button component. Note the styling is accomplished with Tailwind:javascriptvariant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", },
-
Integrate with the Rest of Your UI
Once styled, the element can be integrated seamlessly into your application's UI. This method is particularly useful for maintaining uniformity and reusability of styles within your application, simplifying the management of component appearances across different parts of your application.