Primitives/Button
Button
Base UI button with default, outline, secondary, ghost, destructive and link variants and optical icon padding.
- Version
- 1.0.1
- Tier
- Primitive
- Updates taken
- Minor and patch
- Files
- 1
Preview
Install
In a project already set up on the contract, which is what registers the @ja3dan prefix. If yours isn't, set it up first.
bunx shadcn@latest add @ja3dan/button Also installs @base-ui/react class-variance-authority if the project doesn't have them.
Related items
Used by
Source
What lands in your project, read from the published item rather than the working tree.
import { Button as ButtonPrimitive } from "@base-ui/react/button";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,scale] duration-150 ease-out outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring active:not-disabled:scale-[0.96] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", outline: "border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "px-4 py-2 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5", sm: "px-3 py-2 text-xs has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5", lg: "px-6 py-3 has-data-[icon=inline-end]:pe-5.5 has-data-[icon=inline-start]:ps-5.5", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, },);/** * Mark a leading or trailing icon with `data-icon="inline-start"` / `"inline-end"` * for optical padding. When rendering a link, pass `nativeButton={false}` with `render`. */function Button({ className, variant = "default", size = "default", ...props}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) { return ( <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} /> );}export { Button, buttonVariants };